1. 涉及屬性

• 引入lodash.js網(wǎng)址
• key 唯一值的設(shè)置
• transition-group --- tag --- name

2. 動畫效果

image.png

image.png

3. 代碼實現(xiàn)

css

<style type="text/css">
    /*引入的lodash*/
    /*v-move 對于設(shè)置過渡的切換時機和過渡曲線非常有用，你會看到如下的例子：*/
    .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值不能用下標值 或者 隨機數(shù)！-->
    </transition-group>
</div>

javascript

//---引入lodash.js網(wǎng)址
<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的調(diào)用方法 _  shuffle改組
            }
        },
        //解決同名字符串 設(shè)置key值的方法
        created(){
            var _id = 1;
            var newA = [];
            this.arr.forEach((val)=>{
                var obj = {val,id:_id};
                _id++;
                newA.push(obj);
            })
            this.arr = newA;
        }
    })
</script>