Vue3 project uses animate.css animation effect

animate.css uses

Install

npm i animate.css

introduce

Introduced in the main.ts file

// 引入动画库
import "animate.css"

use

Pay attention to install the animate.css version, I use v4.1.1 here, animate__animated is the base class that must be used (because the installed animate version is 4.x, when using it, it should be noted that all the corresponding class names start with animate__, and it must be used together with animate__animated!)

//注意这里必须加animate__animated基类
<div class="animate__animated animate__fadeInDown"></div>

Use content in transition & animation in vue3

Combining the content of transition & animation in vue3, customize the transition class name.
The transition class name can be customized through the following attributes:

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

  <div
    enter-active-class="animate__animated animate__bounce"
    leave-active-class="animate__animated animate__bounce"
  >
    将要添加动画效果的dom元素
  </div>

---

Animate.css official website specific parameters refer to here

---

wow.js: show animation while scrolling

Sometimes it is necessary to implement animation with wow.js

Install

npm install wowjs

npm i animate.css

introduce

Introduced in the main.ts file

// 引入动画库
import "animate.css"

Global import

Initialize in main.ts or App.vue

import {
    
     WOW } from 'wowjs'

var wow = new WOW({
    
    
	boxClass: 'wow',    //需要执行动画元素的Class
	animateClass: 'animated',    //animation.css动画的Class
	offset: 0,    //距离可视区域多少开始执行动画
	mobile: true，    //是否在移动设备执行动画
	live: true    //异步加载的内容是否有效
	})
	wow.init();
}

local introduction

Reference wow.js in required components

import {
    
     WOW } from 'wowjs'

Initialize wow.js in the life cycle

mounted(){
    
    
var wow = new WOW({
    
    
	boxClass: 'wow',    //需要执行动画元素的Class
	animateClass: 'animated',    //animation.css动画的Class
	offset: 0,    //距离可视区域多少开始执行动画
	mobile: true，    //是否在移动设备执行动画
	live: true    //异步加载的内容是否有效
	})
	wow.init();
}