vue學習（2）關於過渡狀態

vue過渡使用transition的封裝組件，有4個（css）類名在  enter/leave的過渡狀態中切換

1，v-enter:定義進入過渡的開始狀態，在元素被插入時生效，在下一幀時移除

2，v-enter-active定義進入過渡的結束狀態，在元素被插入時生效，在 transition/animation完成以後移除。

3，v-leave定義離開過渡的開始狀態，在離開過渡被觸發時生效，在下一幀移除。

4，v-leave-active定義離開過渡的結束狀態，在離開過渡被觸發時生效，在transition/animation完成以後移除。

示意圖以下：

代碼以下：

javascript:

javascript:
new Vue({
    el:"#example",
    data:{
        show:true
    }
})

 

html:

html:
<div  id="example">
    <button  @click="show=!show">
        Toggle render
    </button>
    <transition>
        <p  v-if="show">hello</p>
    </transition>     
</div>

 

css:

/* 能夠設置不一樣的進入和離開動畫 */
/* 設置持續時間和動畫函數 */
.slide-fade-enter-active {
    transition: all .3s ease;
}
.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
//v-leave-active定義離開過渡的結束狀態，在離開過渡被觸發時生效，定義告終束狀態，由於咱們想要獲得這樣的效果，在元素離開時元素是慢慢消失的，
//所以這兒定義的是離開的結束狀態
//使用v-leave定義的是離開的一開始的狀態，不包含動畫，若是定義了，那麼這個元素將會立刻消失
.slide-fade-enter, .slide-fade-leave-active {
    transform: translateX(10px);
    opacity: 0;
}

在上面的例子中，

.slide-fade-enter定義進入過渡的開始狀態，一開始

opacity:0;

transform:translateX(10px)

通過 .slide-fade-active的時候，在transition/animation完成以後移除

v-是這些類名的前綴，當咱們使用trnasition組件的時候，經過爲transition定義name能夠自定義  V- 前綴

例如：

<transition  name="my-transition">

則v-enter能夠替換爲  my-transition-enter