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.js,ajax渲染页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
在vue2中 使用的 this.$route 和 this.$router this.$store的使用在vue3中完全适用，这篇文章主要介绍了Vue3 使用Vuex和router的注意事项及操作方法,需要的朋友可以参考下2022-12-12
vue项目使用md5加密、crypto-js加密、国密sm3及国密sm4的方法
密码或者其他比较重要东西假如使用明文传输中是很危险的,所以就需要前端一些加密协议,对密码、手机号、身份证号等信息进行保护,下面这篇文章主要给大家介绍了关于vue项目中使用md5加密、crypto-js加密、国密sm3及国密sm4的相关资料,需要的朋友可以参考下2022-12-12
在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，本文就来介绍一下vue 项目接口管理，具有一定的参考价值，感兴趣的小伙伴可以一起来了解一下2019-01-01
这篇文章主要介绍了面试官：为什么Vue中的v-if和v-for不建议一起用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了Vue细节，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本篇文章主要介绍了Vue.js学习笔记之修饰符，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家学习介绍了如何利用Vue2实现全局水印的效果，文中的示例代码简洁易懂，具有一定的借鉴价值，感兴趣的小伙伴可以了解下2023-07-07
Vue.js绑定HTML class数组语法错误有哪些原因导致的呢，该如何解决呢？下面小编给大家分享Vue.js绑定HTML class数组语法错误的原因分析，感兴趣的朋友一起看看吧2016-10-10
今天小编就为大家分享一篇解决Vue+Element ui开发中碰到的IE问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论