Vue integrates Animate.css through the third party to achieve simple and fast animation. Through class name reference, all animations of Animate can be easily realized. Animate.css is a powerful preset css3 animation library. Animate.css has many typical css3 built-in Animation, good compatibility and easy to use.
problem to be solved
1. Vue mouse move in and out events (to prevent the screen from flickering).
2. Integrated use of Animate.css animation library
vue mouse move in and out
- The difference between mouse events "mouseover and mouseout" and "mouseenter and mouseleave"
Both the mouseover event and the mouseenter event are triggered when the mouse enters a node. The difference between the two is that the mouseenter event is only triggered once, and as long as the mouse moves inside the node, the mouseover event will be triggered multiple times on the child node.
Both the mouseout event and the mouseleave event are triggered when the mouse leaves a node. The difference between the two is that when a child element is left inside the parent element, the mouseleave event will not be triggered, but the mouseout event will be triggered.
Therefore, when using "mouseover and mouseout", the problem of screen flicker will occur, because the event will also be triggered in the child node, so to avoid the problem of screen flicker, it is recommended to use "mouseenter and mouseleave".
Animate.css animation library integrated use
1. Install Animate.css in the vue project (npm installation)
npm install animate.css 3. The project uses 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. Detailed class list of Animate.css
| Attention seekers | |
| animate__bounce | bounce |
| animate__flash | flash |
| animate__pulse | pulse |
| animate__rubberBand | rubber band |
| animate__shakeX | Shake the X axis |
| animate__shakeY | Shake the Y axis |
| animate__headShake | shake your head |
| animate__swing | swing |
| animate__tada | Then |
| animate__wobble | shake |
| animate__jello | jelly |
| animate__heartBeat | heartbeat |
| Back entrances | |
| animate__backInDown | step back |
| animate__backInLeft | back left |
| animate__backInRight | rear right |
| animate__backInUp | step back |
| Back exits | |
| animate__backOutDown | step back |
| animate__backOutLeft | back left |
| animate__backOutLeft | back right |
| animate__backOutUp | step back |
| Bouncing entrances | |
| animate__bounceIn | bounce |
| animate__bounceInDown | bounce down |
| animate__bounceInLeft | bounce left |
| animate__bounceInRight | right bounce |
| animate__bounceInUp | rebound |
| Bouncing exits | |
| animate__bounceOut | bounce |
| animate__bounceOutDown | bounce down |
| animate__bounceOutLeft | bounce left |
| animate__bounceOutRight | bounce right |
| animate__bounceOutUp | bounce up |
| Fading entrances | |
| animate__fadeIn | fade in |
| animate__fadeInDown | fade in and fade out |
| animate__fadeInDownBig | fade large |
| animate__fadeInLeft | fade left |
| animate__fadeInLeftBig | fade in left large |
| animate__fadeInRight | fade right |
| animate__fadeInRightBig | Fade in right large |
| animate__fadeInUp | fade up |
| animate__fadeInUpBig | fade in large |
| animate__fadeInTopLeft | fade in top left |
| animate__fadeInTopRight | top right fade |
| 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 | rotate up right |
| Rotating exits | |
| animate__rotateOut | rotary output |
| animate__rotateOutDownLeft | Rotate left to disappear |
| animate__rotateOutDownRight | Rotate right to disappear |
| animate__rotateOutUpLeft | Rotate up left and disappear |
| animate__rotateOutUpRight | Rotate right up to disappear |
| Specials | |
| animate__hinge | hinge |
| animate__jackInTheBox | Rotate flashing bouncing |
| animate__rollIn | roll in |
| animate__rollOut | roll out |
| Zooming entrances | |
| animate__zoomIn | enlarge |
| animate__zoomInDown | zoom out zoom out |
| animate__zoomInLeft | zoom left |
| animate__zoomInRight | zoom right |
| animate__zoomInUp | Zoom in from bottom to top |
| Zooming exits | |
| animate__zoomOut | zoom out |
| animate__zoomOutDown | zoom in zoom out disappear |
| animate__zoomOutLeft | zoom out left |
| animate__zoomOutRight | zoom out right |
| animate__zoomOutUp | Zoom out from bottom to top |
| Sliding entrances | |
| animate__slideInDown | slide down |
| animate__slideInLeft | slide left |
| animate__slideInRight | slide right |
| animate__slideInUp | slide up |
| Sliding exits | |
| animate__slideOutDown | slide down |
| animate__slideOutLeft | slide left |
| animate__slideOutRight | slide right |
| animate__slideOutUp | slide up |
This article is original, and it is not easy to be original. If you need to reprint, please contact the author for authorization.