Vue 中的动画
需求:屏幕上有Hello World 文字,还有一个切换按钮,点击切换按钮,文字渐渐消失,再次点击按钮,文字渐渐出现。transition
标签,当一个元素被该标签包裹后,vue会分析CSS样式,自动构建动画流程。
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-to{
transition:opacity 3s;
}
</style>
<div id="app">
<transition name="fade">
<div v-if="show">Hello World</div>
</transition>
<button @click="onClick">切换</button>
</div>
<script>
new Vue({
el:"#app",
data:{
show:"true"
},
methods:{
onClick:function () {
this.show=!this.show
}
}
})
</script>
解释:
- 如果
transition
标签没有name,默认是v - 动画显示
v-if=true
image.png
- 在动画即将被执行的瞬间,vue会向他包裹的标签中添加两个class名字
fade-enter
和fade-enter-active
- 当动画第一帧执行结束之后,vue会在动画运行第二帧之前,去掉
fade-enter
并添加fade-enter-to
- 当动画结束的时候,vue会将
fade-enter-active
和fade-enter-to
去掉。
- 在动画即将被执行的瞬间,vue会向他包裹的标签中添加两个class名字
- 动画隐藏
v-if=false
image.png
- 在动画即将被执行的瞬间,vue会向他包裹的标签中添加两个class名字
fade-leave
和fade-leave-active
- 当动画第一帧执行结束之后,vue会在动画运行第二帧之前,去掉
fade-leave
并添加fade-leave-to
- 当动画结束的时候,vue会将
fade-leave-active
和fade-leave-to
去掉。
- 在动画即将被执行的瞬间,vue会向他包裹的标签中添加两个class名字
Vue 使用animate.css库
官网:https://daneden.github.io/animate.css/