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向上滑出

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

Logo

前往低代码交流专区

更多推荐