Animate.css在vue中的使用方式
作者:FIRE
这篇文章主要介绍了Animate.css在vue中的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Animate.ss的动画效果超可爱的,用起来也方便,最近用了,记录一下
vue animate.css的安装和使用
安装
npm install animate.css --save //或者 yarn add animate.css
使用
在入口文件中引入
import animate from 'animate.css' Vue.use(animate)
选择你要的样式
打开官网Animate.css
具体使用
在你需要动画样式的地方把样式名称写上就行
注意!一定要写这个animated
animate.css在vue中的入场和离场动画
enter-active-class和leave-active-class在vue官网中有介绍
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>动画-未使用动画</title> <link rel="stylesheet" href="css/animate.css" rel="external nofollow" /> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <style> .demo{ width: 150px; height: 150px; background-color: pink; } </style> </head> <body> <!--点击按钮让h3显示,再点击,让h3显示--> <div id="example"> <input type="button" value="btn" @click="flag=!flag"/> <!--使用transtion元素把需要被动画控制的元素包裹起来--> <!--transition元素是官方提供的--> <!--使用animate.css库--> <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="400"><!--入场和离场的时间--> <div v-if="flag" class="demo"> <span>animate.css的动画效果实现</span> </div> </transition> </div> <script> var vm=new Vue({ el:'#example', data:{ flag:false } }) </script> </body> </html>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。