溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
路由跳轉的淡入淡出
在開發中有一種需求叫高端、大氣、上檔次。所以作為一個前端有責任讓你的程序開起來更酷炫。可以在頁面切換時我們加入一些動畫效果，提升我們程序的動效設計
想讓路由有過渡動畫，需要在<router-view>標簽的外部添加<transition>標簽，標簽還需要一個name屬性
<transition name="fade" mode="in-out"> <router-view ></router-view> </transition>
css過渡類名：
組件過渡過程中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，比如name=”fade”,會有如下四個CSS類名：
fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀后立刻刪除。
fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成后移除。
fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀后立刻刪除。
fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成后被刪除。
過渡的樣式：
.fade-enter {
opacity:0;
}
.fade-leave{
opacity:1;
}
.fade-enter-active{
transition:opacity .5s;
}
.fade-leave-active{
opacity:0;
transition:opacity .5s;
}
過渡模式mode：
in-out:新元素先進入過渡，完成之后當前元素過渡離開。
out-in:當前元素先進行過渡離開，離開完成后新元素過渡進入。
以上這篇vue路由切換之淡入淡出的簡單實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
