vue3项目项目使用animate.css动画效果

animate.css使用

安装

npm i animate.css

引入

在main.ts文件中引入

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

使用

注意安装animate.css版本，我这里用的v4.1.1 ，animate__animated是基类必须使用的(因为安装的animate版本是4.x，使用时要注意对应的所有类名都以animate__开头，并且还要配合animate__animated一起使用！)

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

在vue3中使用过渡&动画里的内容

结合了vue3中过渡&动画里的内容，自定义过渡 class 类名。
可以通过以下 attribute 来自定义过渡类名：

• 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官网 具体参数参考这里

---

wow.js:滚动时显示动画

有时需要搭配 wow.js实现动画

安装

npm install wowjs

npm i animate.css

引入

在main.ts文件中引入

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

全局引入

在main.ts 或者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();
}

局部引入

在需要的组件中引用wow.js

import {
    
     WOW } from 'wowjs'

在生命周期里中初始化wow.js

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