Vue实现集成使用第三方Animate.css动画库详细教程（解决鼠标移入移出闪烁问题）

vue通过第三方集成Animate.css简单快速的实现动画，通过类名引用，可以轻松实现Animate的所有动画，Animate.css是一款强大的预设css3动画库，Animate.css内置了很多典型的css3动画，兼容性好使用方便。

需解决的问题

 1. vue鼠标移入移出事件（防止画面闪烁）。
 2. Animate.css动画库集成使用
 

vue鼠标移入移出  鼠标事件“mouseover 和 mouseout ”与“mouseenter 和 mouseleave”的区别

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。
mouseout事件和mouseleave事件，都是鼠标离开一个节点时触发。两者的区别是，在父元素内部离开一个子元素时，mouseleave事件不会触发，而mouseout事件会触发。
所以当使用 “mouseover 和 mouseout ”时会发生画面闪烁的问题，因为在子节点也会触发该事件，所以避免出现画面闪烁的问题，建议使用“mouseenter 和 mouseleave”。

Animate.css动画库集成使用

 1. vue项目中安装Animate.css（npm安装）
 

 npm install animate.css

 3. 项目使用Animate.css
 

1、要想使用animate.css, 需要把相关标签用.....进行包裹，只能包裹单个标签。
2、使用.....可以包裹多个标签，注意一定要加key 这个属性值
3、appear :表示一上来就有动画效果。相当于：:appear = 'true'

 5. Animate.css详细class列表

Attention seekers
animate__bounce	d跳
animate__flash	闪光
animate__pulse	脉冲
animate__rubberBand	橡皮筋
animate__shakeX	摇晃X轴
animate__shakeY	摇晃Y轴
animate__headShake	摇头
animate__swing	摇摆
animate__tada	然后
animate__wobble	摇晃
animate__jello	果冻
animate__heartBeat	心跳
Back entrances
animate__backInDown	后退
animate__backInLeft	后退左
animate__backInRight	后右
animate__backInUp	后退下都上
Back exits
animate__backOutDown	后退
animate__backOutLeft	后退左
animate__backOutLeft	后退右
animate__backOutUp	后退上
Bouncing entrances
animate__bounceIn	d跳
animate__bounceInDown	d跳向下
animate__bounceInLeft	向左反d
animate__bounceInRight	右d跳
animate__bounceInUp	反d
Bouncing exits
animate__bounceOut	d跳
animate__bounceOutDown	d跳向下
animate__bounceOutLeft	向左反d
animate__bounceOutRight	d跳向右
animate__bounceOutUp	d跳向上
Fading entrances
animate__fadeIn	淡入
animate__fadeInDown	淡入淡出
animate__fadeInDownBig	淡入淡出大
animate__fadeInLeft	向左淡入淡出
animate__fadeInLeftBig	淡入左大
animate__fadeInRight	向右淡入淡出
animate__fadeInRightBig	淡入右大
animate__fadeInUp	淡入向上
animate__fadeInUpBig	淡入大
animate__fadeInTopLeft	淡入左上
animate__fadeInTopRight	右上淡入淡出
animate__fadeInBottomLeft	淡入左下
animate__fadeInBottomRight	淡入右下
Fading exits
animate__fadeOut	消退
animate__fadeOutDown	淡出淡出
animate__fadeOutDownBig	淡出淡出大
animate__fadeOutLeft	淡出左
animate__fadeOutLeftBig	淡出左大
animate__fadeOutRight	淡出右移
animate__fadeOutRightBig	淡出右大
animate__fadeOutUp	淡出向上
animate__fadeOutUpBig	淡出向上大
animate__fadeOutTopLeft	淡出左上角
animate__fadeOutTopRight	淡出右上角
animate__fadeOutBottomRight	淡出右下角
animate__fadeOutBottomLeft	淡出左下角
Flippers
animate__flip	翻动
animate__flipInX	翻转X轴
animate__flipInY	翻转Y轴
animate__flipOutX	翻转输出X轴
animate__flipOutY	翻转输出Y轴
Lightspeed
animate__lightSpeedInRight	右光速d动
animate__lightSpeedInLeft	左光速d动
animate__lightSpeedOutRight	右光速d动消失
animate__lightSpeedOutLeft	左光速d动消失
Rotating entrances
animate__rotateIn	旋转输入
animate__rotateInDownLeft	向左下旋转
animate__rotateInDownRight	向右下旋转
animate__rotateInUpLeft	向左上旋转
animate__rotateInUpRight	向右上旋转
Rotating exits
animate__rotateOut	旋转输出
animate__rotateOutDownLeft	向左旋转消失
animate__rotateOutDownRight	向右旋转消失
animate__rotateOutUpLeft	向左上旋转消失
animate__rotateOutUpRight	向右上旋转消失
Specials
animate__hinge	合页
animate__jackInTheBox	旋转闪烁d动
animate__rollIn	滚入
animate__rollOut	推出
Zooming entrances
animate__zoomIn	放大
animate__zoomInDown	缩小放大d出
animate__zoomInLeft	向左放大
animate__zoomInRight	向右放大
animate__zoomInUp	由下向上放大
Zooming exits
animate__zoomOut	缩小
animate__zoomOutDown	放大缩小消失
animate__zoomOutLeft	向左缩小
animate__zoomOutRight	向右缩小
animate__zoomOutUp	由下向上缩小
Sliding entrances
animate__slideInDown	向下滑入
animate__slideInLeft	向左滑入
animate__slideInRight	向右滑入
animate__slideInUp	向上滑入
Sliding exits
animate__slideOutDown	向下滑出
animate__slideOutLeft	向左滑出
animate__slideOutRight	向右滑出
animate__slideOutUp	向上滑出

本文原创，原创不易，如需转载，请联系作者授权。