Начальная позиция динамической анимации CSS с помощью vuejs ⇐ CSS

[Anonymous]

У меня есть элемент Audio на веб-странице, и я использую CSS и VueJS для создания циклического индикатора прогресса, показывающего, какая часть звука была воспроизведена. Все работает так, как я хочу, и по мере воспроизведения звука я вижу, как прогресс меняется.
Проблема, с которой я сталкиваюсь, заключается в том, что когда я хочу переместить звук в новое положение, я могу не могу обновить прогресс.
Любая помощь или совет очень ценятся.
Я подумал, что мне следует использовать анимационный диапазон и привязать к нему значение, но это не работает.









90%





import { defineProps, ref, onMounted, inject } from 'vue'
import { useEventListener } from '@vueuse/core';

const { duration } = defineProps({
duration: {
type: String,
required: false,
},
})

let isPlaying = ref('paused')
let startPosition = ref(0 + '%')

eventBus.on('playing', () => {
isPlaying.value = 'running'
})

eventBus.on('paused', () => {
isPlaying.value = 'paused'
})

const halfDuration = ref((duration / 2) + 's')

eventBus.on('timeupdate', (currentTime) => {
startPosition.value = (currentTime / duration) * 100 + '%'
})

const mainCover = ref()




.progress{
width: 150px;
height: 150px;
line-height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid #f2f5f5;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 5px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 v-bind('halfDuration') linear forwards;
animation-play-state: v-bind('isPlaying');
animation-range: v-bind('startPosition');
}
.progress .progress-value{
width: 100%;
height: 100%;
font-size: 24px;
color: rgb(250, 245, 245);
text-align: center;
position: absolute;
}
.progress.blue .progress-bar{
border-color: #26abfd;
}
.progress.blue .progress-left .progress-bar{
animation: loading-1 v-bind('halfDuration') linear forwards v-bind('halfDuration');
animation-play-state: v-bind('isPlaying');
animation-range: v-bind('startPosition');
}

@keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}



Подробнее здесь: https://stackoverflow.com/questions/792 ... with-vuejs