Посмотрите на мой код, я присваиваю новое значение переменной в data и var width имеет значение 100. После этого, когда анимация заканчивается (и имеет значение 0), я пытаюсь вернуть значение в переменной width 100, и запускаю анимацию снова, но Vue не назначает новое значение 100 и останется 0. Но если я сделаю это с setTimeout, это будет отлично работать. Почему это не происходит в nextTick?
Ссылка на
jsfiddle
Собствеено код
new Vue({
el: '#app',
data: {
width: 100,
time: 0
},
mounted() {
setTimeout(() => {
this.time = 5000;
this.width = 0;
setTimeout(() => {
this.rerenderBar();
}, 5100)
}, 1000)
},
methods: {
rerenderBar() {
this.time = 0;
this.width = 100;
/* this.$nextTick(() => {
this.time = 5000;
this.width = 0;
}) */
setTimeout(() => {
this.time = 5000;
this.width = 0;
}, 1500)
}
}
})
<div id="app">
<div class="progress-bar-wrap">
<div class="progress-bar" :style="{
'width': width + '%',
'transition-duration': `${time}ms`
}"></div>
</div>
</div>
.progress-bar-wrap {
width: 300px;
position: relative;
}
.progress-bar {
position: absolute;
left: 0;
top: 0;
height: 3px;
background: black ;
}
Простой
Средний
