列表动画

单一的使用<transition>标签来控制动画过渡

而使用v-for生成渲染出的则需要使用<transition-group>标签来控制

<transition-group appear tag="ul" >
            <li v-for="(item,i) in list" :key="item.id">{{item.id}}_______{{item.name}}<a href="javascript:;" @click="del(i)">移除</a></li>
</transition-group>

注意： 为v-for创建出来的元素设置动画，必须为每一个添加：key属性

此外还可以给<transition-group>添加appear属性：实现入场的动画过渡效果

使用<transition-group>时，会在审查元素中多渲染出<span>标签，为了遵循w3c，可以给予tag='ul'，来让此渲染成ul标签

 

应为是列表（多个）的动画，所以在css中多出了个v-move 属性；

v-move 表示元素在改变定位的过程中应用（例如删除上一个，下面的也会再次触发动画过渡）

如果要使用v-move时，一定要在v-leave-active中加上 position：absolute属性，

也可以在<transition-group>标签中 添加 move-class="xxx"（多用于第三方库，或提前写好的css动画样式）

.v-move {
     transition: all 1.5s;
}
.v-leave-active {
     position: absolute;
}