Обновить ширину блока css, без применения анимации

Question

Ставлю анимацию на паузу, путем:

polzunok.style.animationPlayState = 'paused'

После того, как анимация выставлена на паузу. Необходимо изменить ширину ползунка, в данный момент свойство ширины блока меняется, но визуально остается прежней.

    video.ontimeupdate = _ => (polzunok.style.width = video.currentTime / (video.duration / 100) + "%");    
    video.onloadedmetadata = _ => (polzunok.style.animation = 'progress ' + video.duration + 's linear infinite paused')
    video.onpause = _ => (polzunok.style.animationPlayState = 'paused');
    video.onplay  = _ => (polzunok.style.animationPlayState = 'running');
    
    polzunok.onpointerdown = contayner.onpointerdown = e1 => {
        polzunok.style.animationPlayState = 'paused';
        polzunok.onpointermove = e => (polzunok.style.width =  ((pp =  e.offsetX / contayner.clientWidth * 100) > 100 ? 100 : pp < 0 ? 0 : pp) + '%')
        polzunok.setPointerCapture(e1.pointerId);
    }

    polzunok.onpointerup = e => {

    }

#contayner{
    border-style: solid;
    width:300px;
}
#polzunok{
    width: 0%;
    height: 15px;
    background: red;
}
@keyframes progress {
    from{width: 0%}
    to{width: 100%}
}

<video id=video src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" width="300" controls></video><br /><br />
<div id=contayner ><div id=polzunok></div></div>

Как в данном случаи, перемещать ползунок и при этом, чтобы анимация продолжалась тогда когда ползунок отпущен.

БЛОГ НА HUSL

Обновить ширину блока css, без применения анимации

Ответы (0 шт):