Animate.css在vue中的使用及路由过渡效果

Animate.css | A cross-browser library of CSS animations.

Animate中文网 – Animate安装、Animate使用、Animate下载 官网

 v2 v3 移动端无效  Vue 官网引用的是 animate.css 3.5 版本!!!

处理方法：
就是安装对应低版本的动画插件，比如官网引入的3.x的animate.css

npm install animate.css@3.5.1 --save

import animate from "animate.css";
Vue.use(animate)

第一个animated是必须添加的样式名，第二个是指定的动画样式名。

 <div class="animated fadeInUp"></div>

PC端用法

npm安装

npm install animate.css

vue2

在main.js引入和使用

vue3

import animate from "animate.css"
app.use(animate as any)

uniapp

如果有v2 v3都要加

uni微信小程序

App.vue中引入 这种在uni中最方便 移动端微信端都通用

<style>
	/* 引入动画 */
	
	@import "./static/animate/animate.css";
</style>

给标签添加类名后便在页面出现时有动画效果

<div class="animate__animated animate__fadeIn">内容部分</div>
注意：

类名中一定要添加“animate__animated”

而“animate__fadeIn”为可替换部分

可替换其他动画（部分，详细请看官网👆）

也可以后期通过绑定class 开启动画

V3利用Animate路由过度效果

V2