I am facing an issue with a component whose value keeps changing. When the component is hidden using a transition, it stops updating the value, which is not the desired behavior.
To see the problem in action, visit this fiddle or refer to this code snippet:
var example = new Vue({
el: '#example',
data: {
visible: true,
counter: 0
},
created: function() {
setInterval(function() {
this.counter++;
}.bind(this), 200);
}
});.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: 2s ease;
}
[v-cloak] {
display: none;
}<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="example" v-cloak>
<p>Value: {{ counter }}</p>
<transition name="fade">
<p v-if="visible">Transition: {{ counter }}</p>
</transition>
<button @click="visible = !visible">
Transition!
</button>
</div>Upon clicking the button, you will notice that the fading paragraph stops updating at the current counter value while the other one keeps updating. How can I resolve this? I want the fading paragraph to only stop updating when it is completely hidden after the transition has completed.