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, 需要把相关标签用<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	向上滑出

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