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

寫個簡單的結構：

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

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

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

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

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

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

<transition name='mask'> <div 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;}

補充知識：vue利用三目運算符綁定class

通過三目運算符來綁定class是一種比較常見的操作

需要注意的是要在data里面聲音下class的名稱

<p :class='isIncrse?incrseP:downP'>環比<i></i>{{item.num}}</p>data() { return { isIncrse: true, incrseP: ’incrseP’, downP: ’downP’ }}

.downP { color: red;}.incrseP { color: pink;}

以上這篇解決vue 退出動畫無效的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。