在多个元素上同步变换过渡答案

【问题标题】：Synchronizing transform transitions on multiple elements在多个元素上同步变换过渡
【发布时间】：2017-01-15 17:39:09
【问题描述】：

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

插件有一个旋转手柄的元素，我添加了一个子元素来剪辑填充图像（.rs-range-clip-custom，没有变换），其中一个子元素旋转回垂直以保持填充图像作为背景（@987654324 @)。对于实际图像而言，这一点非常明显，因为填充会在末端留下间隙或延伸到轨道末端，具体取决于它的移动方向。

.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查看滑块的简化版本

如何确保两个动画同步？

【问题讨论】：

这里无法得到您的确切要求。您添加其他元素的目的是什么，您的最终目标是什么？
我想要一个自定义图像作为范围/填充背景，而不是纯色。它应该保持静止并被夹住，而不是随手柄旋转。如果您查看代码笔，我将静态背景图像设置为轨道，另一个用于手柄，第三个用于范围填充

标签： css google-chrome jquery-plugins css-animations round-slider

【解决方案1】：

在这里，我在示例级别自定义了roundSlider 以满足您的要求。

在下面的演示中，我添加了一个额外的 SVG 元素作为范围来应用图像。请查看下面的演示，它证明了您的要求：

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

为了更好地理解，我在下面的演示中应用了其他一些 png 图像，请检查：

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

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

【讨论】：

这不是我想要的，但它让我走上了正轨。我将path 更改为circle 并使用stroke-dasharray 设置长度。它可能仍然存在动画同步问题，但它主要被句柄 codepen.io/MalikDrako/pen/xEWvNv 隐藏。