目录
首先安装
引入
使用
说一下Animate.css这个动画库,很多的动画在这个库里面都定义好了,我们用的时候可以直接使用里面的类名就可以了,就是直接目标元素绑定对应的类名就可以实现动画效果,非常方便,库其实也相对简单,使用起来也简单。这里示例就以v3为例了,v2也是一样的
github:
https://github.com/animate-css/animate.css
官网:
https://animate.style/
首先安装
pnpm add animate.css
引入
main.js
import 'animate.css'
使用
接下来就可以正常使用了
注意:在添加类名的时候,里面所有的动画必须先设置上 animate__animated ,然后再设置对应动画的类名,否则是不会生效的,大家简单看一下源码就能了解
下面是个示例:
接下来代码:
到此这篇关于vue中使用Animate.css的教程详解的文章就介绍到这了,更多相关vue Animate.css内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
vue封装Animate.css动画库的使用方式
Vue3 路由页面切换动画 animate.css效果
vue中使用animate.css实现炫酷动画效果
Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码
Animate.css在vue中的使用方式
