溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue退出動畫無效怎么辦？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！
遇到一個問題：給模態框加入退出動畫，進入的動畫效果是有的，可是退出的動畫就沒有了。
寫個簡單的結構：
<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退出動畫無效怎么辦大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
