1. 涉及属性
- 引入lodash.js网址
- key 唯一值的设置
- transition-group --- tag --- name
2. 动画效果
image.png
image.png
3. 代码实现
css
<style type="text/css">
/*引入的lodash*/
/*v-move 对于设置过渡的切换时机和过渡曲线非常有用，你会看到如下的例子：*/
.flip-list-move {
transition: transform 1s;
}
</style>
html
<div id="app">
<button @click="transfp">变换位置</button>
<transition-group tag="ul" name="flip-list">//---注意tag要给爸爸ul
<li v-for="(val,index) in arr" :key="val.id">{{val.val}}---{{val.id}}</li>
<!--坑点：这里的key值不能用下标值 或者 随机数！-->
</transition-group>
</div>
javascript
//---引入lodash.js网址
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
arr:["html","html","css","js","vue","jQ"],
},
methods:{
transfp(){
this.arr = _.shuffle(this.arr) //loadsh的调用方法 _ shuffle改组
}
},
//解决同名字符串 设置key值的方法
created(){
var _id = 1;
var newA = [];
this.arr.forEach((val)=>{
var obj = {val,id:_id};
_id++;
newA.push(obj);
})
this.arr = newA;
}
})
</script>
