这里用到许多文档中的内容和使用Animate库的过程,以及自己的理解,所以会分为文档,解释,步骤三部分
效果图.gif
https://cn.vuejs.org/v2/guide/transitions.html#自定义过渡的类名
https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-钩子
一.文档
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
在这里，我们只会讲到进入、离开和列表的过渡，你也可以看下一节的 管理过渡状态。
简单的说,就是如果要在Vue中实现复杂的动画效果,需要引入第三方前端库Animate.css
image.png
简单的说,就是可以通过自定义的类名-class代替原始的类名v-/nameValue-*,也就是说在
特定的时间段,添加自己定义的动画样式.
它的优先级高于普通的类名
二.步骤
1.导入animate.css文件
2.在需要的时间添加animate中的类
3.元素默认显示,让它第一次就显示
image.png
image.png
三.代码测试
1.enter-active-class="指定进入的时候绑定的动画类名"
2.leave-active-class="指定离开的时候绑定的动画类名"
注意:如果元素默认就是显示的,那么第一次不会触发动画,如果想第一次就触发动画.可以再添加一个appear属性
image.png
四.附录
image.png
刷新界面会左右摇摆
