animate.css旧版失效、Vue搭配新版animate.css实现动画效果

一、安装

在vue脚手架目录下cmd运行

npm install animate.css --save

在main.js下全局引入并挂载

import animated from 'animate.css' 

Vue.use(animated)

二、使用

在需要实现动画效果的组件上加上类名，用法类似于Bootstrap

<span class="animate__animated animate__zoomIn">test</span>

• 更改动画类型

bounce             弹跳
flash              闪烁
pulse              放大，缩小
rubberBand         放大，缩小，弹簧
shake              左右晃动
headShake          左右小幅晃动
swing              左右扇形摇摆
tada               放大，左右上下晃动，缩小
wobble             左右小幅(圆点较远)扇形摇摆
jello              左右左右上下晃动

bounceIn           重复放大缩小
bounceInDown       从上到下出现，弹簧
bounceInLeft       从左到右出现，弹簧
bounceInRight      从右到左出现，弹簧
bounceInUp         从下到上出现，弹簧
bounceOut          从常规到小消失，弹簧
bounceOutDown      从常规到小，从下方消失，弹簧
bounceOutLeft      从常规到小，从左方消失，弹簧
bounceOutRight     从常规到小，从右方消失，弹簧
bounceOutUp        从常规到小，从上方消失，弹簧

fadeIn             渐现
fadeInDown         渐现，从上到下
fadeInDownBig      渐现，从上到下，滑动距离较长
fadeInLeft         渐现，从左到右
fadeInLeftBig      渐现，从左到右，滑动距离较长
fadeInRight        渐现，从右到左
fadeInRightBig     渐现，从右到左，滑动距离较长
fadeInUp           渐现，从下到上
fadeInUpBig        渐现，从下到上，滑动距离较长
fadeOut            渐隐
fadeOutDown        渐隐，从上到下
fadeOutDownBig     渐隐，从上到下，滑动距离较长
fadeOutLeft        渐隐，从左到右
fadeOutLeftBig     渐隐，从左到右，滑动距离较长
fadeOutRight       渐隐，从右到左
fadeOutRightBig    渐隐，从右到左，滑动距离较长
fadeOutUp          渐隐，从下到上
fadeOutUpBig       渐隐，从下到上，滑动距离较长

flip               中心Y轴旋转，放大，缩小
flipInX            元素中心X轴旋转
flipInY            元素中心Y轴旋转
flipOutX           中心X轴旋转，消失
flipOutY           中心Y轴旋转，消失

lightSpeedIn       从右到左，平行四边形，左上角突出进入
lightSpeedOut      从左到右，平行四边形，左上角突出进入

rotateIn           元素中心顺时针旋转进入
rotateInDownLeft   元素左外长半径顺时针旋转进入
rotateInDownRight  元素右外长半径逆时针旋转进入
rotateInUpLeft     元素左外长半径逆时针旋转进入     
rotateInUpRight    元素右外长半径顺时针旋转进入
rotateOut          元素中心顺时针旋转消失
rotateOutDownLeft  元素左外长半径顺时针旋转消失
rotateOutDownRight 元素右外长半径逆时针旋转消失
rotateOutUpLeft    元素左外长半径逆时针旋转消失
rotateOutUpRight   元素右外长半径顺时针旋转消失

hinge              从右上到坐下，顺时针旋转，从上到下消失

rollIn             元素左外长半径顺时针旋转，平滑进入
rollOut            元素右外长半径顺时针旋转，平滑进入

zoomIn             元素由小变大进入
zoomInDown         元素由小变大，从上方进入
zoomInLeft         元素由小变大，从左方进入
zoomInRight        元素由小变大，从右方进入
zoomInUp           元素由小变大，从下方进入
zoomOut            元素由大变小，消失
zoomOutDown        元素由大变小，从下方消失
zoomOutLeft        元素由大变小，从左方消失
zoomOutRight       元素由大变小，从右方消失
zoomOutUp          元素由大变小，从上方消失

slideInDown        元素从上到下，平滑进入
slideInLeft        元素从左到右，平滑进入
slideInRight       元素从右到左，平滑进入
slideInUp          元素从下到上，平滑进入
slideOutDown       元素从上到下，平滑消失
slideOutLeft       元素从右到左，平滑消失
slideOutRight      元素从左到右，平滑消失
slideOutUp         元素从下到上，平滑消失

可以根据以上动画种类列表更换动画类型

例如：

<span class="animate__animated animate__fadeIn">test</span>

• 更改动画播放速度

animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

例如： 

<span class="animate__animated animate__zoomIn animate__slow">test</span>