Как в некоторых случаях отключить анимацию?
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" v-bind: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;
}
Вот пример модифицированной группы переходов с флажком для переключения анимации. Я использую класс css для отключения анимации, когда это необходимо. Обычно это работает нормально, но есть ошибка: если вы снимите флажок, затем нажмите «Перемешать», а затем снова установите флажок, анимация по-прежнему не работает. Насколько я могу судить при использовании инструментов разработчика Chrome, в этом случае классы перехода к элементам не применяются.
Другой способ решить эту проблему - изменить свойство имени перехода. Но у меня такой же баг. 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" v-bind: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;
}
Я что-то не так понимаю в переходе или это ошибка vue?
