vue transition 结合 animate.css 实现动画过渡
程序员文章站
2024-03-25 12:55:10
...
在vue组件中实现一些过渡动画是很常见的,有时候使用一些css库也是很正常的,今天就简单的说一下在vue组件中使用transition与animate.css结合的用法
-
安装animate.css
cnpm install animate.css –save
当然也可以将animate.css文件下载下来
下载animate.css
放进assets文件夹以供调用 -
调用animate.css
import ‘animate.css’
或者
import ‘../../assets/animate.css’
设置类名
在transition 标签中设置自定义css类名,详情看这里 ,如下:
<template>
<div id="app">
<button @click="show = !show">隐藏/显示</button>
<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" >
<p v-if="show">hello word,I love China</p>
</transition>
</div>
</template>
<script>
import $ from 'jquery'
import 'animate.css'
export default {
data(){
return {
show:true,
}
},
components:{
tabA,
tabB
}
}
</script>
<style scoped>
#app{
margin-left: 500px;
}
</style>
具体animate.css的api可以看这里,生动形象具体随意选择 animate.css API
上一篇: js闪烁效果