解決vue 退出動畫無效的問題

更新時間：2020年08月09日 09:30:59 作者：qiu_freedom

這篇文章主要介紹了解決vue 退出動畫無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

寫個簡單的結(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>請登錄</p><br>　　　　
</div><br>　　
</transition><br></div>

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

如果像上面的結(jié)構(gòu)，會遇到我上述的問題。因為warning-modal包裹在.mask遮罩層里面。但是.mask沒有動畫，一點擊關(guān)閉，.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;
}

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

通過三目運算符來綁定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 退出動畫無效的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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