Animate.css在vue中的使用方式
更新时间：2024年07月24日 15:21:20 作者：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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目中页面底部出现白边及空白区域错误的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
文章介绍了如何使用Vue CLI 2搭建Vue项目,并添加Electron插件vue-cli-plugin-electron-builder来创建一个Vue+Electron项目,文章还提供了启动和打包项目的方法,并提示了下载国内网较慢的文件时可以先注释掉代码进行调试,感兴趣的朋友一起看看吧2025-01-01
vue2如何使用simple-keyboard软键盘有中文(拼音)
这篇文章主要介绍了vue2如何使用simple-keyboard软键盘有中文(拼音),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue3.0-monaco组件封装存档代码解析,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
这篇文章也是我自己开发的从无到有的过程，所以它可以为你提供一些Tree组件开发的思路，本文重点给大家介绍vue递归组件的简单实现，感兴趣的朋友跟随小编一起看看吧2019-04-04
Vue中.env、.env.development及.env.production文件说明
这篇文章主要给大家介绍了关于Vue中.env、.env.development及.env.production文件说明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
本文主要介绍了vue父组件调用子组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
这篇文章主要介绍了springboot+vue+对接支付宝接口+二维码扫描支付（沙箱环境）,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了使用 vue 实现灭霸打响指英雄消失的效果 demo,需要的朋友可以参考下2019-05-05
这篇文章主要给大家介绍了关于treeSelect树组件设置父节点禁用的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-12-12
最新评论