除了原生的js方法实现动画效果之外,在vue中还有两种常用的动画方法。
1.vue内置组件transition
通过点击事件控制元素隐藏显示
在需要加动画的元素外添加transition标签,并添加一个名字name=“fade”。
<transition name="fade">
<div v-if="show"></div>
</transition>
<button @click="toggle">点击动画</button>
在css样式中添加动画修饰,实现淡入淡出效果。
.fade-enter{
opacity:0
}
.fade-enter-to{
opacity:1
}
.fade-enter-active{
transition:all 1s
}
.fade-leave{
opacity:1
}
.fade-leave-to{
opacity:0
}
.fade-leave-active{
transition:all 1s
}
在methods方法中添加按钮的点击事件,就可以实现元素的淡入淡出效果。
data(){
return {
show:true
}
},
methods:{
toggle(){
this.show = !this.show
}
}
如果在transition标签内有多个元素,则要把transition标签换成transition-group,并且要在标签内部的元素上添加不同的key值。
<transition-group name="fade">
<div v-if="show" key=1></div>
<div v-if="show" key=2></div>
<div v-if="show" key=3></div>
</transition-group>
<button @click="toggle">点击动画</button>
2. 引用animate.css插件
首先需要使用npm install animate.css命令下载插件,在node_moudles里面找到animate.css样式。
动画插件可能会在整个项目中使用,所以我在main.js文件中引入,接着在需要使用插件的元素外面添加transition标签,在标签内写enter-active-class和leave-active-class两个属性,其中这里的slideInRight和bounceOutRight代表动画名称,animated表示动画过渡时间。
<transition
enter-active-class='slideInRight animated'
leave-active-class='bounceOutRight animated'
>
<div v-if="show"></div>
</transition>
在animate.css官网有很多具体的动画效果演示,选择喜欢的直接写在动画属性里就可以了。