<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="root">
<button @click="shuffle">洗牌</button>
<transition-group tag="ul">
<li v-for="item in list" :key="item">{{item}}</li>
</transition-group>
</div>.v-move {
transition: transform 1s;
}var vm = new Vue({
el: '#root',
data: {
list: [1,2,3,5,6,7,8]
},
methods: {
shuffle: function () {
this.list = _.shuffle(this.list)
}
}
})
External CSS
This Pen doesn't use any external CSS resources.