同步多个元素上的变换转换

Question

我正在使用滑块插件（http://roundsliderui.com/）并添加了其他元素以获得自定义填充图像。在Chrome中，即使设置相同，单击滑块时发生的转换也不会同步。它似乎只发生在Chrome中，并且在移动设备上更糟糕。我使用Crosswalk webview定位Android，因此会影响所有用户，尤其是较慢的手机。

插件有一个旋转手柄的元素，我添加一个子项来剪切填充图像（.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; } ）。实际图像非常明显，因为填充将在末端留下间隙或延伸超过轨道末端，具体取决于它的移动方向。

this

您可以在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

从这里您可以根据您的要求进一步定制。我希望这有助于你..请让我知道你的意见。