文章目录
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();
}