解決vue 退出動(dòng)畫(huà)無(wú)效的問(wèn)題
遇到一個(gè)問(wèn)題：給模態(tài)框加入退出動(dòng)畫(huà)，進(jìn)入的動(dòng)畫(huà)效果是有的，可是退出的動(dòng)畫(huà)就沒(méi)有了。
寫(xiě)個(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ì)遇到我上述的問(wèn)題。因?yàn)閣arning-modal包裹在.mask遮罩層里面。但是.mask沒(méi)有動(dòng)畫(huà)，一點(diǎn)擊關(guān)閉，.mask沒(méi)有動(dòng)畫(huà)，就直接消失了，warning-modal跟著.mask消失,它的退出動(dòng)畫(huà)我們也就看不到了。如果把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)畫(huà)！
我的解決方法的做法是加兩個(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)畫(huà)增加transition-delay屬性。
.mask-leave-active{
transition:all 1s;
transition-delay:1s;
}
補(bǔ)充知識(shí)：vue利用三目運(yùn)算符綁定class
通過(guò)三目運(yùn)算符來(lái)綁定class是一種比較常見(jiàn)的操作
需要注意的是要在data里面聲音下class的名稱(chēng)
<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)畫(huà)無(wú)效的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了Vue中的計(jì)算屬性和axios基本使用回顧，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue3中Provide?/?Inject的實(shí)現(xiàn)原理分享
provide和inject主要為高階插件/組件庫(kù)提供用例,這篇文章主要給大家介紹了關(guān)于Vue3中Provide?/?Inject的實(shí)現(xiàn)原理,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
超詳細(xì)動(dòng)手搭建一個(gè)VuePress 站點(diǎn)及開(kāi)啟PWA與自動(dòng)部署的方法
這篇文章主要介紹了超詳細(xì)動(dòng)手搭建一個(gè)VuePress 站點(diǎn)及開(kāi)啟PWA與自動(dòng)部署的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
VUE異步更新DOM - 用$nextTick解決DOM視圖的問(wèn)題
這篇文章主要介紹了VUE異步更新DOM - 用$nextTick解決DOM視圖的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue路由回退的完美解決方案（vue-route-manager）
最近做了一個(gè)vue項(xiàng)目關(guān)于路由場(chǎng)景的問(wèn)題,路由如何回退指定頁(yè)面,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下2021-09-09
vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問(wèn)題
這篇文章主要介紹了vue跳轉(zhuǎn)外部鏈接始終有l(wèi)ocalhost的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3+vueuse實(shí)現(xiàn)放大鏡示例詳解
這篇文章主要為大家介紹了Vue3+vueuse實(shí)現(xiàn)放大鏡示例過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
el-date-picker日期范圍限制的實(shí)現(xiàn)
本文主要介紹了el-date-picker日期范圍限制的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue項(xiàng)目打包優(yōu)化方式(讓打包的js文件變小)
這篇文章主要介紹了vue項(xiàng)目打包優(yōu)化方式(讓打包的js文件變小)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04