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

寫個簡單的結構：

<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是顯示模態框的內容。

如果像上面的結構，會遇到我上述的問題。因為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">環比<i></i>{{item.num}}</p>
data() {
  return {
    isIncrse: true,incrseP: 'incrseP',downP: 'downP'
  }
}

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

以上這篇解決vue 退出動畫無效的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。