console
new Vue({
el: '#app',
data: {
nums: [1, 2, 3, 4, 5, 6]
},
methods: {
shuffle () {
this.nums = _.shuffle(this.nums)
}
}
})
new Vue({
el: '#flip-list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9]
},
methods: {
shuffle: function () {
this.items = _.shuffle(this.items)
}
}
})
<div id="app">
<button @click="shuffle">点击</button>
<transition-group name="flip">
<li v-for="(item, index) in nums" :key="index">{{ item }}</li>
</transition-group>
</div>
<div>———— key绑定的值不同 —————</div>
<div id="flip-list-demo" class="demo">
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="flip-list" tag="ul">
<li v-for="item in items" :key="item">
{{ item }}
</li>
</transition-group>
</div>
.flip-move {
transition: transform 2s;
}
.flip-list-move {
transition: transform 2s;
}