如何在滑块中设置动画进度条

Question

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

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

插图

# Photo 
# Progress bar 
# Caption 

问题

目前进度条是在X宽。当我将滑块拖到左侧时，宽度会增加，但它不适用于我上面提到的内容。

演示

https://codepen.io/abelchun39/pen/vedBPx

Answer 1

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

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

例子： https://codepen.io/MattDiMu/pen/zERqmV