0

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

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

如何确保两个动画同步？

4

1 回答 1

0

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

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

http://jsbin.com/debiyu/edit?html，输出

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

http://jsbin.com/henola/1/edit?html，输出

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

于 2016-10-08T14:13:10.097 回答