Vue中的CSS transition和animation
2019-06-05 本文已影响0人
meteornnnight
1. Vue中的CSS transition过渡
当我们插入一个元素的时候，vue会在过渡的第0帧给<transition name="fade">标上"fade-enter","fade-enter-active"两个类名, 在过渡的第一帧删除"fade-enter"，添加上"fade-enter-to", 在整个过渡动画结束之后，删除"fade-enter-to"和"fade-enter-active"类名。我们可以认为"fade-enter"和"fade-enter-to"是<transition>包裹的元素的两个状态，当我们在"fade-enter-active"中加入CSS transition rule, 就可以在整个过渡动画过程中检测到状态的变化，其实两个状态的切换往往就在第0帧和第1帧，检测到这一状态变化之后，css transition就会开始。
enter.png
删除一个元素的时候流程也是相似的：
leave.png
细节：
<transition :duration='5000'>
<div>hello</div>
</transition>
<style>
.v-enter,.v-leave-to{
opacity: 0;
}
.v-enter-active,.v-leave-active{
transition: all 1s ease;
}
</style>
- 我们可以显式定义过渡动画的持续时间。上述代码中，尽管
transition:opacity的过渡动画在1s后就完成了，但是v-enter-to,v-enter-active两个类名会保持到5s结束。 - 因为transition其实是两个状态的切换，在实际情况中，
.v-enter,.v-leave-to表示的其实是一个状态，因此往往采用相同的CSS rules。
2. Vue中的CSS animation动画
我们都知道CSS3中的animation不像transition需要状态改变来触发，因此我们可以直接在.v-enter-active,.v-leave-active中应用animation。我们可以自己通过keyframes自己创建动画，也可以引用外部的CSS动画库，比如说animated.css，里面是很多已经写好的keyframes动画。
3. 同时结合transition和animation的一个栗子
<style>
.slide-enter,.slide-leave-to{
opacity: 0;
}
.slide-enter-active{
transition: all 1s;
}
.slide-leave-active{
transition: all 1s;
}
</style>
<div id="root">
<button @click="show=!show">toggle</button>
<transition
:duration="5000"
name="slide"
appear
enter-active-class="animated slideInUp slide-enter-active"
leave-active-class="animated slideOutDown slide-leave-active"
appear-active-class="animated slideInUp slide-enter-active">
<div v-show="show">Hello</div>
</transition>
</div>
<script>
const app=new Vue({
el:"#root",
data:{
show:true,
}
});
</script>
