解決vue 退出動(dòng)畫無(wú)效的問題
遇到一個(gè)問題：給模態(tài)框加入退出動(dòng)畫，進(jìn)入的動(dòng)畫效果是有的，可是退出的動(dòng)畫就沒有了。
寫個(gè)簡(jiǎn)單的結(jié)構(gòu)：
<div class="<strong>mask</strong>" 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 class="mask" 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 class="mask" 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
通過(guò)三目運(yùn)算符來(lái)綁定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)畫無(wú)效的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vuex里面有四個(gè)map方法，他們分別可以針對(duì)不同的元素進(jìn)行不同的代碼生成，本文就來(lái)詳細(xì)的介紹一下vuex中的四個(gè)map方法，具有一定的參考價(jià)值，感興趣的可以了解一下2023-05-05
使用vue3實(shí)現(xiàn)數(shù)據(jù)漏斗圖
漏斗圖一般會(huì)借助一些第三方的庫(kù)來(lái)實(shí)現(xiàn),這些庫(kù)使用起來(lái)雖然簡(jiǎn)單順手,但是如果要定制樣式就會(huì)不太方便,本文我們就來(lái)用vue3手?jǐn)]一個(gè)漏斗圖吧2024-11-11
這篇文章主要介紹了vue-cli@3.0 使用及配置說(shuō)明,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
利用WebStorm創(chuàng)建一個(gè)Vue項(xiàng)目的完整步驟
WebStorm是一個(gè)非常適合學(xué)習(xí)和開發(fā)Vue項(xiàng)目的集成開發(fā)環(huán)境,下面這篇文章主要給大家介紹了關(guān)于利用WebStorm創(chuàng)建一個(gè)Vue項(xiàng)目的完整步驟,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題
這篇文章主要介紹了關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解Vue中使用v-for語(yǔ)句拋出錯(cuò)誤的解決方案
本篇文章主要介紹了詳解Vue中使用v-for語(yǔ)句拋出錯(cuò)誤的解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
本篇文章主要介紹了詳解使用vuex進(jìn)行菜單管理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
極速上手 VUE 3 teleport傳送門組件及使用語(yǔ)法
teleport 傳送門組件，提供一種簡(jiǎn)潔的方式，可以指定它里面的內(nèi)容的父元素，也就是說(shuō)teleport 中的內(nèi)容允許我們控制在任意的DOM中，使用簡(jiǎn)單，對(duì)VUE 3 teleport傳送門相關(guān)知識(shí)感興趣的朋友一起看看吧2021-10-10