28-Vue动画-使用Animate库

这里用到许多文档中的内容和使用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

刷新界面会左右摇摆