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

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

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

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

寫個簡單的結構：

<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)框的內容。

如果像上面的結構，會遇到我上述的問題。因為warning-modal包裹在.mask遮罩層里面。但是.mask沒有動畫，一點擊關閉，.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 退出動畫無效的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

ElementUI中el-tabs事件綁定的具體使用
本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
Vue中的計算屬性和axios基本使用回顧
這篇文章主要介紹了Vue中的計算屬性和axios基本使用回顧，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue3中Provide?/?Inject的實現(xiàn)原理分享
provide和inject主要為高階插件/組件庫提供用例,這篇文章主要給大家介紹了關于Vue3中Provide?/?Inject的實現(xiàn)原理,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-02-02
超詳細動手搭建一個VuePress 站點及開啟PWA與自動部署的方法
這篇文章主要介紹了超詳細動手搭建一個VuePress 站點及開啟PWA與自動部署的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
VUE異步更新DOM - 用$nextTick解決DOM視圖的問題
這篇文章主要介紹了VUE異步更新DOM - 用$nextTick解決DOM視圖的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue路由回退的完美解決方案（vue-route-manager）
最近做了一個vue項目關于路由場景的問題,路由如何回退指定頁面,在此做個記錄,這篇文章主要給大家介紹了關于Vue路由回退的完美解決方案,主要利用的是vue-route-manager,需要的朋友可以參考下
2021-09-09
vue跳轉外部鏈接始終有l(wèi)ocalhost的問題
這篇文章主要介紹了vue跳轉外部鏈接始終有l(wèi)ocalhost的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue3+vueuse實現(xiàn)放大鏡示例詳解
這篇文章主要為大家介紹了Vue3+vueuse實現(xiàn)放大鏡示例過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
el-date-picker日期范圍限制的實現(xiàn)
本文主要介紹了el-date-picker日期范圍限制的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-05-05
vue項目打包優(yōu)化方式(讓打包的js文件變小)
這篇文章主要介紹了vue項目打包優(yōu)化方式(讓打包的js文件變小)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04