Vue3?Transition組件給頁面切換并加上動畫效果
前言
本文分享一個Vue頁面組件之間切換的動畫效果，主要應用在移動端設備，使用戶在切換頁面或者切換組件的時候交互體驗感更好一些，使用的是Vue3自帶的Transition組件。
一、Transition組件是什么？
先簡單介紹一下Transition組件，來自官方介紹：
<Transition>是一個內(nèi)置組件，這意味著它在任意別的組件中都可以被使用，無需注冊。它可以將進入和離開動畫應用到通過默認插槽傳遞給它的元素或組件上。進入或離開可以由以下的條件之一觸發(fā)：
- 由 v-if 所觸發(fā)的切換
- 由 v-show 所觸發(fā)的切換
- 由特殊元素
<component>切換的動態(tài)組件- 改變特殊的 key 屬性
簡單來說，左邊Enter是當元素從無到有的時候觸發(fā)，v-enter-to即頁面上顯示元素的最終狀態(tài)；右邊Leave則與之相反，頁面上元素消失觸發(fā)Leave，從v-leave-from狀態(tài)變?yōu)?strong>v-leave-to狀態(tài)。知道了這個，那么接下來將應用其component切換觸發(fā)的特性，編寫路由切換的動畫效果。
二、動畫效果
分析&說明：
其中 Home 與 About 都是組件，點擊導航觸發(fā)組件切換，很顯然上面的切換是有兩個動畫效果的，當頁面從 Home 組件 切換到 About 組件，Home 對應的是Leave步驟，About 對應的是Enter步驟，整體是從右往左發(fā)生了位移，所以from就是 translateX(0)，to就是translateX(-100%)，這么一說有沒有豁然開朗了呢，那么從 About 組件切換到 Home 組件就反過來，從左往右位移，不過這個有些特殊，后面會提到，先看完整代碼。
三、代碼
1. 頁面展示
<template>
<div class="wrapper">
<!-- 導航條 -->
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
<!-- 動畫區(qū)，設置flex布局 -->
<div class="animation">
<router-view v-slot="{ Component }">
<transition :name="transitionName">
<component :is="Component" />
</transition>
</router-view>
</div>
</div>
</template>2. 動畫切換邏輯
<script setup>
import { RouterLink, useRouter } from 'vue-router';
import { ref } from 'vue';
let transitionName = ref();
let router = useRouter();
router.beforeEach((to, from) => {
// 根據(jù)路由標記判斷觸發(fā)哪個動畫
if (to.meta.index > from.meta.index) {
// 從右往左動畫
transitionName.value = 'slide-right';
} else if (to.meta.index < from.meta.index) {
// 從左往右動畫
transitionName.value = 'slide-left';
} else {
transitionName.value = '';
}
});
</script>3. 路由文件
// 省略部分代碼
routes: [
{
path: '/',
name: 'home',
component: HomeView,
meta: {
index: 1
}
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
meta: {
index: 2
}
}
]4. 樣式
.wrapper {
overflow-x: hidden;
.animation {
display: flex;
width: 200%;
& > div {
width: 50%;
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: transform 0.3s;
}
.slide-right-enter-from {
transform: translateX(0);
}
.slide-right-enter-to {
transform: translateX(-100%);
}
.slide-right-leave-from {
transform: translateX(0);
}
.slide-right-leave-to {
transform: translateX(-100%);
}
.slide-left-enter-from {
transform: translateX(-200%);
}
.slide-left-enter-to {
transform: translateX(-100%);
}
.slide-left-leave-from {
transform: translateX(0);
}
.slide-left-leave-to {
transform: translateX(100%);
}
}
}5. 實現(xiàn)原理
來看看慢動作演示：
從這個動態(tài)圖能看出來，組件切換過程中新組件是立即加入到DOM，而舊組件的移除是先等待動畫結束后再移除，所以當在外層定義了flex布局就會使其橫向排列。另外Transition總是在舊組件元素下方插入了新組件元素，所以一開始提到的從左往右移動的時候，根據(jù)flex布局定位，動畫開始時home組件本來是位于about右邊的，但是要使其位于about左邊，所以要設置其translateX(-200%)。
四、One More Thing
1、實現(xiàn)
從上面動態(tài)圖其實能發(fā)現(xiàn)，元素Enter的時候，該元素上被添加上v-enter-active以及v-enter-to的樣式，當然Leave過程也是類似的。如果你要問 v-enter-from 與 v-leave-from 怎么沒看到，那么從官方文檔上我們能知道：
v-enter-from：進入動畫的起始狀態(tài)。在元素插入之前添加，在元素插入完成后的下一幀移除。
v-leave-from：離開動畫的起始狀態(tài)。在離開過渡效果被觸發(fā)時立即添加，在一幀后被移除。
所以看不到是正常的，我們可以按照文檔上給的思路實現(xiàn)一下這個過程，比如添加一個遮罩層元素的過渡效果：
const overlayNode = document.createElement('div');
overlayNode.className = 'my-overlay';
// 添加初始顯示的過渡效果
overlayNode.classList.add('my-overlay-enter-from');
overlayNode.classList.add('my-overlay-enter-active');
// 在body標簽內(nèi)部插入此元素
document.body.appendChild(overlayNode);
const nextClass = () => {
overlayNode.classList.remove('my-overlay-enter-from');
overlayNode.classList.add('my-overlay-enter-to');
};
// 元素插入完成后的下一幀觸發(fā)
requestAnimationFrame(nextClass);
// 在過渡或動畫完成之后移除
setTimeout(() => {
overlayNode.classList.remove('my-overlay-enter-to');
overlayNode.classList.remove('my-overlay-enter-active');
}, 300);
樣式可以自己定義，我這里就不展示了，或者可以參考一下我上一篇文章給 Dialog組件 加遮罩層的過程。
2、多種寫法
當我們知道原理了之后，寫法上就可以很靈活了，比如可以改成這樣子給過渡效果加動畫：
$slide-duration: 3s;
.slide-left-enter-active {
animation: slide-left-in $slide-duration;
}
.slide-left-leave-active {
animation: slide-left-out $slide-duration;
}
.slide-right-enter-active {
animation: slide-right-in $slide-duration;
}
.slide-right-leave-active {
animation: slide-right-out $slide-duration;
}
@keyframes slide-left-in {
0% {
transform: translateX(-200%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes slide-left-out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
@keyframes slide-right-in {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes slide-right-out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}v-enter-active 與 v-leave-active 都是應用于整個進入動畫階段的，使用CSS的 animation 屬性直接自定義添加動畫也是可以的。
總結
以上就是全部內(nèi)容，這篇文章分享了Vue3的Transition組件，利用它能實現(xiàn)基于狀態(tài)變化的過渡和動畫效果，本文只是簡單介紹了一下使用方法，并做出了一種頁面切換的動畫效果，更多的動畫效果有待進一步探索，大家可以自行研究。
擴展閱讀
到此這篇關于Vue3 Transition組件給頁面切換并加上動畫效果的文章就介紹到這了,更多相關Vue3 Transition組件頁面切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue3 Vite 進階rollup命令行使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
vue中想要mock數(shù)據(jù)在線上環(huán)境生效如何操作
本文主要介紹了在配置了mock數(shù)據(jù)之后在線上環(huán)境使用,主要通過在main.ts文件中注冊和vite.config.ts文件夾中配置插件來實現(xiàn),感興趣的可以了解一下2025-01-01
本篇文章主要介紹了vue-router 組件復用問題詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
v-cloak原理是先通過樣式隱藏內(nèi)容,然后在內(nèi)存中進行值的替換,將替換的內(nèi)容再反饋給界面,數(shù)據(jù)渲染完場之后,v-cloak 屬性會被自動去除,本文詳細介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧2023-09-09
插槽（slot）可以說在一個?Vue?項目里面處處都有它的身影，比如我們使用一些UI?組件庫的時候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，今天通過本文給大家介紹vue3插槽slot的相關知識，感興趣的朋友一起看看吧2022-08-08
這篇文章主要介紹了淺談Vue 函數(shù)式組件的使用技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
本篇文章主要介紹了Vue 父子組件、組件間通信示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家介紹了Vue 項目遷移 React 路由部分經(jīng)驗分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
使用Element-UI的NavMenu如何隱藏自帶的小箭頭
這篇文章主要介紹了使用Element-UI的NavMenu如何隱藏自帶的小箭頭問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vuejs第八篇之Vuejs組件的定義實例解析的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09