列表动画：transition-group

1. 列表动画

1.1 列表动画实现场景

列表动画主要出现在对一个列表进行添加或者删除时候,需要对该列表添加或者删除的操作进行动画自定义；

1.2 列表动画实现方式

在根组件中使用transition-group标签对中对li标签对进行v-for绑定数组遍历渲染；

动画组(transition-group):tag属性,包裹列表标签的标签名；页面会渲染成该标签;

transition-group中的列表标签:key属性；需要被设置唯一的key,key的值必须满足两个特性，分别是唯一性和不变性；

1.3 代码

li {
    list-style: none;
}

.v-enter,
.v-leave-to {
    transform: translateX(1200px);
}

.v-enter-active,
.v-leave-active {
    transition: 1s;
}

.v-enter-to,
.v-leave {
    transform: translateX(0);
}

<div id="app">
    <button @click="add">添加</button>
    <button @click="del">删除</button>
    <transition-group tag="ul">
        <li v-for="v,i in list" :key="v">
            {{v}}
        </li>
    </transition-group>
</div>

new Vue({
    el: '#app',
    data: {
        list: [],
        firstName: ['张', '王', '李', '赵', '党', '孙', '黄浦', '欧阳', '马', '钱', '邵', '刘']
        , lastName: ['腾飞', '浩', '铁蛋', '狗蛋', '娜娜', '飞', '老贼', '珠', '大黄', '狗子'],
    },
    methods: {
        add() {
            var index1 = parseInt(Math.random() * this.firstName.length)
            var index2 = parseInt(Math.random() * this.lastName.length)
            var name = this.firstName[index1] + this.lastName[index2];
            console.log(name);
            if (this.list.includes(name)) {
                return;
            }
            this.list.unshift(name);
        },
        del() {
            this.list.pop();
        }
    },
})