如何为滑块中的进度条设置动画答案

【问题标题】：How to animate the progress bar in slider如何为滑块中的进度条设置动画
【发布时间】：2017-10-06 11:40:56
【问题描述】：

我使用 jQuery 创建了一个滑块。我的照片滑块上有一个缩略图和标题。标题和照片中间的图片缩略图下方有一个进度条固定位置。

滑块可以向左或向右拖动。当滑块保持静止时，进度条的宽度为零。当用户将照片向左拖动到下一张照片时，进度条的宽度会动态增加，直到下一张照片在起点处几乎被替换（进度条的宽度接近 100%，然后再次回到 0% 宽度）。

插图

# Photo
# Progress bar
# Caption

问题

目前进度条为 X 宽度。当我将滑块向左拖动时，宽度会增加，但它不适用于我上面提到的。

演示

【问题讨论】：

【解决方案1】：

如果我理解正确，您希望在进度条的不同状态/宽度之间创建平滑过渡。使用 css 道具 transition: <prop-to-be-animated> <duration> <timing-function> 应该可以完成这项工作。例如。在你的情况下：

.bar {
  transition: width 1s ease-in-out; 
}

【讨论】：