Vue动画实现方法

Vue动画

Vue动画实现的3种方法

---

1.自定义

1.定义动画

2.然后在body包裹起来

3.可是有一个问题，就是我们另外想用其他动画效果该怎么办呢？因为上面的相当于全局的。

这时候，我们就要修改 V- 前缀，例：

4.然后在 transition 添加 name =“所修改的前缀”

2.使用第三方类-- animate.css

1.引入 animate.css

可以搜索 animate 官网，有效果显示。

2.在 transition 加类（注意，类别前要加 animated ，: duration ="毫秒值"来统一设置 入场 和 离场 时候的动画时长）

也可以有这种写法

3.使用钩子函数（即 JavaScript ）

如果我们只想实现入场或者立场变化，即半场变化，使用上面两种方法是行不通的，所以应使用方法3。
这里引入小球实例

1.引入半场动画方法

2.在 Vue 中的 methods 方法中定义该方法

其中 enter 方法中的 el.offsetWidth 没有实际意义，也可以改成 el.offsetHeight 等等，加入的参数 done 和调用 done() 方法是为了能快速响应接下来的 afterEnter 方法。

Vue列表动画

1.定义列表

2.实现列表

列表的话不能再用 transition ，而要用 transition-group 。加上 appear 是让数据有入场效果。加上 tag = " ul " ，主要是不加而直接套上 ul 下会有 span 标签，也可以但是不符合规范。如图直接套 ul

F12查看

3.补充小知识点（可以不用记）

直接上图

总结

关于 Vue 动画就以上一个字符串例子和一个列表例子，主要分别使用 transition 、transition-group 包裹起来即可，其他的话用到再百度即可。