Синхронизация переходов преобразования на нескольких элементах

Question

Я использую плагин слайдера ( http://roundsliderui.com/) и добавил дополнительные элементы, чтобы иметь пользовательское изображение заливки. В Chrome переходы, которые происходят при нажатии на ползунок, не синхронизируются, даже если настройки одинаковы. Это только кажется, что происходит в Chrome, и хуже на мобильном телефоне. Я нацеливаюсь на Android с веб-обзором Crosswalk, так что это повлияет на всех пользователей, особенно на более медленных телефонах.

Плагин имеет один элемент, который вращает дескриптор, и я добавляю одного дочернего элемента, чтобы обрезать изображение заливки (.rs-range-clip-custom, без преобразования) с дочерним элементом, который поворачивается назад к вертикали, чтобы сохранить изображение заливки в качестве фона (.rs-range-custom). Это очень заметно для реальных изображений, поскольку заливка либо оставит зазор в конце, либо простирается за конец дорожки в зависимости от направления движения.

.rs-animation .rs-transition {/* plugin css */
    transition: all .5s linear 0s;
}
.rs-animation .rs-range-custom {/* my css */
    transition: transform 0.5s linear;
}

Вы можете просмотреть упрощенную версию слайдера по адресу http://codepen.io/MalikDrako/pen/XjbaWR

Как я могу обеспечить синхронизацию двух анимаций?

Answer 1

Здесь я настроил roundSlider на уровне образца, чтобы удовлетворить ваши требования.

В демонстрации ниже я добавил дополнительный элемент SVG в качестве диапазона, чтобы применить изображение для этого. Пожалуйста, проверьте демо ниже, которые демонстрируют ваше требование:

http://jsbin.com/debiyu/edit?html,output

Для лучшего понимания я применил некоторые другие png-изображения в демонстрации ниже, проверьте, что:

http://jsbin.com/henola/1/edit?html,output

Отсюда вы можете настроить дальше в зависимости от ваших требований. Я надеюсь, что это поможет вам.. Пожалуйста, дайте мне знать ваши комментарии.