Vue-动画缓慢随机变换位置-lodash.js

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>