vue.js css3 vue集成animate.css

vue集成animate.css

一 `` 标签的用法二 关于animate.css三 vue集成animate.css使用

一 标签的用法

使用标签包裹要加动画的元素。 标签中添加属性name，表示执行动画的名字，不加默认为v 如果没使用属性name，设置动画需要用： 进入：.v-enter 进入的起点、.v-enter-to 进入的终点、.v-enter-active 进入的过程（Vue2） 离开：.v-leave 离开的起点、.v-leave-to 离开的终点、.v-leave-active 离开的过程（Vue2） 如果有name属性，设置动画用： 进入：.name值-v-enter 进入的起点、.name值-enter-to 进入的终点、.name值-enter-active 进入的过程（Vue2） 离开：.name值-leave 离开的起点、.name值-leave-to 离开的终点、.name值-leave-active 离开的过程（Vue2） 标签中添加属性appear，值为布尔值true/false，表示是否在初始化时就执行动画

// 没有加name属性

// 加上name属性，并且加上appear属性

二 关于animate.css

介绍animate.css 常用的几种分类

Attention seekers：用于引人注目的动画，比如刚进一个网站，要凸显的某个地方，可以用这个动画。Bouncing entrances 与 Bouncing exits 弹跳入场与弹跳出场的动画。Fading entrances 与 Fading exits 淡入浅出的动画Rotating entrances 与 Rotating exits 旋转入场与旋转出场的动画Zooming entrances 与 Zooming exits 缩放入场与缩放出场的动画Sliding entrances 与 Sliding exits 侧边划入与侧边划出的动画

三 vue集成animate.css

npm i animate.css在main.js 中 引入 import ‘animate.css’;

使用

固定配置上name="animate__animated animate__bounce"通过enter-active-class和leave-active-class实现不同样式配置，这两个的属性的值就是animate.css官网中样式的名称。

例如：

name="animate__animated animate__bounce"

enter-active-class="animate__swing"

leave-active-class="animate__fadeOutTopLeft"

>

...

推荐阅读