css - 在多个元素上同步变换过渡

Question

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

该插件有一个旋转 handle 的元素，我添加了一个子元素来剪辑填充图像(.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 查看 slider 的简化版本

如何确保两个动画同步？

Answer 1

这里我定制了roundSlider在 sample 水平上达到您的要求。

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

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

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

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

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