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, 需要把相关标签用<transition>.....</transition>进行包裹，只能包裹单个标签。
2、使用<transition-group>.....</transition-group>可以包裹多个标签，注意一定要加key 这个属性值
3、appear :表示一上来就有动画效果。相当于：:appear = 'true'<template>
<div class="hu_sidebar">
<div class="hu_qrcode">
<a-icon class="tzc_qrcode" type="qrcode" @mouseenter="sidebar()" @mouseleave="sidebar2()"/>
<transition
appear//appear:一上来就有动画效果
name="animate__animated animate__bounce"//animate初始类名
enter-active-class="animate__fadeIn"//enter-active-class:设置进入的动画类名
leave-active-class="animate__bounceOutRight"//leave-active-class:设置离开的动画类名
>
<div ref="message" class="hu_qrcode_obtain" v-show="flag">
<div class="hu_q_img">
<img :src="Qrcode.img" alt="">
</div>
<div class="hu_q_title">{
{Qrcode.title}}</div>
</div>
</transition>
</div>
</div>
</template>
<script>
import { getccconfig } from "@/api/pub_api.js";
export default {
data() {
return {
flag:false,
Qrcode:{}
};
},
mounted() {
this.Qrcode_obtain();
},
methods: {
sidebar(){
this.flag=true
},
sidebar2(){
this.flag=false
},
Qrcode_obtain(){
let query = {
info: 'PCqrcode'
};
getccconfig(query).then((res) => {
this.Qrcode=res.data.mydata;
console.log('qrcode', res)
}).catch((err) => {
console.log(err)
});
}
},
};
</script>
5. Animate.css详细class列表
| Attention seekers | |
| animate__bounce | 弹跳 |
| 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 | 弹跳 |
| animate__bounceInDown | 弹跳向下 |
| animate__bounceInLeft | 向左反弹 |
| animate__bounceInRight | 右弹跳 |
| animate__bounceInUp | 反弹 |
| Bouncing exits | |
| animate__bounceOut | 弹跳 |
| animate__bounceOutDown | 弹跳向下 |
| animate__bounceOutLeft | 向左反弹 |
| animate__bounceOutRight | 弹跳向右 |
| animate__bounceOutUp | 弹跳向上 |
| 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 | 右光速弹动 |
| animate__lightSpeedInLeft | 左光速弹动 |
| animate__lightSpeedOutRight | 右光速弹动消失 |
| animate__lightSpeedOutLeft | 左光速弹动消失 |
| 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 | 旋转闪烁弹动 |
| animate__rollIn | 滚入 |
| animate__rollOut | 推出 |
| Zooming entrances | |
| animate__zoomIn | 放大 |
| animate__zoomInDown | 缩小放大弹出 |
| 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 | 向上滑出 |
本文原创，原创不易，如需转载，请联系作者授权。