使用CSS过渡的话，要考虑到列表内容变化过程中，存在相关元素的定位改变，如果要让定位是平滑过渡的动画，要另外一个v-move属性。 这个属性是通过设置一个css类的样式，来将创建元素在定位变化时的过渡，Vue内部是通过FLIP实现了一个动画队列，只要注意一点就是过渡元素不能设置为display:inline,这里需要文档上的代码做一个简短的demo：(其实通过在li上设置过渡transition属性也可以实现v-move的效果)
<template> <button v-on:click="shuffle">Shuffle</button> <transition-group tag="ul"> <li v-for="item in items" v-bind:key="item">{{ item }}</li> </transition-group> </template> <script> import _ from 'lodash'; export default { data() { return { items: [1,2,3,4,5,6,7,8,9] } }, methods: { shuffle: function () { this.items = _.shuffle(this.items) } } } </script> <style lang="css"> .flip-list-move { transition: transform 1s; } </style>
数值和属性动态变化
这一部分的动画主要是针对数据元素本身的特效，比如数字的增减，颜色的过渡过程控制，svg动画的实现等，其本质都是数字/文本的变化。 我自己总结就是：通过利用Vue的响应式系统，把数字的变化通过外部库把DOM上对应数值的变化做出连续的效果，如1->100是个数字递增的连续过程，黑色->红色的过程。官方文档主要是用几个示例代码来说明，其本质步骤如下：
在页面上通过input的双向绑定修改某一变量a，还有一个处理dom上的过渡效果的变量b
这个数据被watcher绑定(watch对象中某个属性是这个变量a)，触发逻辑
在watcher里面的逻辑就是通过外部过渡库，指定初始值b和最终值a，是把b的值最后改为a
DOM上绑定的变量就是b，如果某些复杂情况可能是基于b的计算属性，从而把b的变化过程展现出来
上面这个思路走一遍下来就完成了一个单元级别的动画效果，这种类似的流程其实是很常见的需求，所以有必要把这个过程封装成一个组件，只暴露要过渡的值作为入口，每次改变这个值都是一个动画过渡效果。组件封装需要在上面四个步骤的基础上添加mounted生命周期规定初始值即可，同时原来的两个值a/b在组件里面作为一个值，可以用watch对象中的newValue和oldValue作为区分。 至于最后的SVG，其本质也是数字的过渡，只不过里面涉及的状态变量更多，代码更长而已，不过纯前端页面这种需求倒还是不多的，不过作为爱好倒可以鼓捣一些好玩的小demo，不过肯定需要设计师的参与，要不那些参数可不好调出来呐。