トランジションアニメーションを無効にする

Question

場合によってはアニメーションを無効にする方法はありますか？ここ

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 Devツールを使って見る限り、移行クラスはこのケースの要素には適用されません。

これを解決するもう一つの方法は、移行名プロパティを変更することでした。しかし、私は同じバグがあります。 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バグですか？

Answer 1

これはバグで、reported on their GitHubです。

、彼らが与えた問題を回避するには、transition-groupからkey属性を追加することでした：

<transition-group :name="transitionName" :key="transitionName" tag="ul"> 

Here's a fiddle

---

私が見つけた回避策を明示的に（自分の第二の例に）disabled-list-moveクラスを追加しましたほとんど瞬間的に速い移行（transition: transform 0sが同じ問題を引き起こした）：

.flip-list-move { 
    transition: transform 1s; 
} 

.disabled-list-move { 
    transition: transform 0.0000000001s; 
} 

Here's a fiddle