遇到一個(gè)問題：給模態(tài)框加入退出動(dòng)畫，進(jìn)入的動(dòng)畫效果是有的，可是退出的動(dòng)畫就沒有了。

寫個(gè)簡(jiǎn)單的結(jié)構(gòu)：

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

.mask是遮罩層，.warning-modal是顯示模態(tài)框的內(nèi)容。

如果像上面的結(jié)構(gòu)，會(huì)遇到我上述的問題。因?yàn)閣arning-modal包裹在.mask遮罩層里面。但是.mask沒有動(dòng)畫，一點(diǎn)擊關(guān)閉，.mask沒有動(dòng)畫，就直接消失了，warning-modal跟著.mask消失,它的退出動(dòng)畫我們也就看不到了。如果把transition放在外面。

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

很顯然 ，遮罩層也會(huì)跟著提醒框有動(dòng)畫！

我的解決方法的做法是加兩個(gè)transition

<transition name='mask'> <div v-show='warning'> <transition name='warning'> <div v-show=“warning” class='warning-modal'> <p>請(qǐng)登錄</p> </div></transition></div></transition>//然后給maskde 退出動(dòng)畫增加transition-delay屬性。.mask-leave-active{ transition:all 1s; transition-delay:1s;}

補(bǔ)充知識(shí)：vue利用三目運(yùn)算符綁定class

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

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

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

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

以上這篇解決vue 退出動(dòng)畫無效的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。