How do I turn off animation in certain cases?
https://jsfiddle.net/4b3nxv7n/
<div id="flip-list-demo" class="demo" :class="{'animate': animate}">
<button v-on:click="shuffle">Shuffle</button>
<input type="checkbox" v-model="animate"/>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" :key="item">
{{ item }}
</li>
</transition-group>
</div>
new Vue({
el: '#flip-list-demo',
data: {
animate: true,
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
.animate .flip-list-move {
transition: transform 1s;
}
In this example, I have implemented a modified transition group with a checkbox to control the animation. By using a CSS class, you can disable the animation when needed. However, there is a bug that occurs if you uncheck the checkbox, shuffle the items, and then check it again, the animation may not work properly. It seems that the transition classes are not properly applied in this case.
I also attempted another solution by changing the transition name property, but encountered the same bug: https://jsfiddle.net/61vLtaxn/
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<input type="checkbox" v-model="animate"/>
<transition-group :name="transitionName" tag="ul">
<li v-for="item in items" :key="item">
{{ item }}
</li>
</transition-group>
</div>
new Vue({
el: '#flip-list-demo',
data: {
animate: true,
items: [1,2,3,4,5,6,7,8,9]
},
computed: {
transitionName: function () {
return this.animate ? 'flip-list' : 'disabled-list'
}
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
.flip-list-move {
transition: transform 1s;
}
Could this issue be related to a misunderstanding of transitions or possibly a bug in Vue.js?