如何在滑塊中設置動畫進度條

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