前言

本文分享一個Vue頁面組件之間切換的動畫效果，主要應(yīng)用在移動端設(shè)備，使用戶在切換頁面或者切換組件的時候交互體驗感更好一些，使用的是Vue3自帶的Transition組件。

一、Transition組件是什么？

先簡單介紹一下Transition組件，來自官方介紹：

<Transition> 是一個內(nèi)置組件，這意味著它在任意別的組件中都可以被使用，無需注冊。它可以將進(jìn)入和離開動畫應(yīng)用到通過默認(rèn)插槽傳遞給它的元素或組件上。進(jìn)入或離開可以由以下的條件之一觸發(fā)：

• 由 v-if 所觸發(fā)的切換
• 由 v-show 所觸發(fā)的切換
• 由特殊元素 <component> 切換的動態(tài)組件
• 改變特殊的 key 屬性

簡單來說，左邊Enter是當(dāng)元素從無到有的時候觸發(fā)，v-enter-to即頁面上顯示元素的最終狀態(tài)；右邊Leave則與之相反，頁面上元素消失觸發(fā)Leave，從v-leave-from狀態(tài)變?yōu)?strong>v-leave-to狀態(tài)。知道了這個，那么接下來將應(yīng)用其component切換觸發(fā)的特性，編寫路由切換的動畫效果。

二、動畫效果

分析&說明：

其中 Home 與 About 都是組件，點擊導(dǎo)航觸發(fā)組件切換，很顯然上面的切換是有兩個動畫效果的，當(dāng)頁面從 Home 組件 切換到 About 組件，Home 對應(yīng)的是Leave步驟，About 對應(yīng)的是Enter步驟，整體是從右往左發(fā)生了位移，所以from就是 translateX(0)，to就是translateX(-100%)，這么一說有沒有豁然開朗了呢，那么從 About 組件切換到 Home 組件就反過來，從左往右位移，不過這個有些特殊，后面會提到，先看完整代碼。

三、代碼

1. 頁面展示

<template>
  <div class="wrapper">
    <!-- 導(dǎo)航條 -->
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
    <!-- 動畫區(qū)，設(shè)置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ù)路由標(biāo)記判斷觸發(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，而舊組件的移除是先等待動畫結(jié)束后再移除，所以當(dāng)在外層定義了flex布局就會使其橫向排列。另外Transition總是在舊組件元素下方插入了新組件元素，所以一開始提到的從左往右移動的時候，根據(jù)flex布局定位，動畫開始時home組件本來是位于about右邊的，但是要使其位于about左邊，所以要設(shè)置其translateX(-200%)。

四、One More Thing

1、實現(xiàn)

從上面動態(tài)圖其實能發(fā)現(xiàn)，元素Enter的時候，該元素上被添加上v-enter-active以及v-enter-to的樣式，當(dāng)然Leave過程也是類似的。如果你要問 v-enter-from 與 v-leave-from 怎么沒看到，那么從官方文檔上我們能知道：

v-enter-from：進(jìn)入動畫的起始狀態(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標(biāo)簽內(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、多種寫法

當(dāng)我們知道原理了之后，寫法上就可以很靈活了，比如可以改成這樣子給過渡效果加動畫：

$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 都是應(yīng)用于整個進(jìn)入動畫階段的，使用CSS的 animation 屬性直接自定義添加動畫也是可以的。

總結(jié)

以上就是全部內(nèi)容，這篇文章分享了Vue3的Transition組件，利用它能實現(xiàn)基于狀態(tài)變化的過渡和動畫效果，本文只是簡單介紹了一下使用方法，并做出了一種頁面切換的動畫效果，更多的動畫效果有待進(jìn)一步探索，大家可以自行研究。

如果此篇文章對您有幫助，歡迎您【點贊】、【收藏】！也歡迎您【評論】留下寶貴意見，共同探討一起學(xué)習(xí)~

擴展閱讀

Vue3 內(nèi)置組件 — Transition文章來源地址http://www.zghlxwxcb.cn/news/detail-490815.html

到了這里，關(guān)于Vue3 Transition組件給頁面切換加動畫效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！