vue 退出動畫無效解決方法

遇到一個問題：給模態框加入退出動畫，進入的動畫效果是有的，可是退出的動畫就沒有了。

寫個簡單的結構：

<div class="mask" v-show="warning">
　　<transition name="warning">
　　　　<div v-show=“warning” class="warning-modal">
　　　　　　<p>請登錄</p>
　　　　</div>
　　</transition>
</div>

 

.mask是遮罩層，.warning-modal是顯示模態框的內容。

 

如果像上面的結構，會遇到我上述的問題。因為warning-modal包裹在.mask遮罩層里面。但是.mask沒有動畫，一點擊關閉，.mask沒有動畫，就直接消失了，warning-modal跟着.mask消失,它的退出動畫我們也就看不到了。如果把transition放在外面。

<transition name="warning">
    <div class="mask" v-show="warning">
　　　　<div v-show=“warning” class="warning-modal">
　　　　　　<p>請登錄</p>
　　　　</div>
    </div>　　
</transition>

 很顯然 ，遮罩層也會跟着提醒框有動畫！

 

我的解決方法的做法是加兩個transition

<transition name="mask">
    <div class="mask" v-show="warning">
      <transition name="warning"> 
　　　　    <div v-show=“warning” class="warning-modal">
　　　　　　  <p>請登錄</p>
　　　　    </div>
　　　　</transition> 
　　</div>　　 
</transition>

//然后給maskde 退出動畫增加transition-delay屬性。

.mask-leave-active{
      transition:all 1s;
      transition-delay:1s;
}