解構前端動態設計：DOM 與 CSS 動畫的基礎

有沒有發現，當你點擊按鈕或滑動圖片，卻沒有任何動畫或反饋時，網站體驗顯得有些單調乏味？要讓網頁變得有趣又有靈魂，當然不能少了動態效果啦！

從簡單的淡入淡出，到稍微進階一點的滑動、縮放，這些小巧妙的動畫不僅讓網站看起來更精緻專業，也讓使用者玩起來超有感覺～所以，今天我們就來了解一些基本概念開始，而且立即實現這些「神奇」的動態效果吧！

準備好了嗎？Let’s go！✨

動態效果的重要性

試想一下，一個按鈕光秃秃地站在那裡，點它也毫無反應，是不是有點無趣？如果按鈕點下去時，顏色優雅地變換，甚至還會bring bring，是不是感覺立刻升級了好幾個等級！

這就是動態效果的魅力啦～不僅增加了視覺美感，還能讓使用者感受到操作的流暢感。

左邊按鈕沒有任何回饋
右邊可以讓人耳目一新

DOM 與 Virtual DOM 的運作

想實現動態效果，先來認識一下 Vue.js 動態效果背後的核心小夥伴——Virtual DOM 和 CSS animations！

DOM（Document Object Model）是瀏覽器中 HTML 文件的結構化表示，就像一棵樹一樣，每個標籤、每個元素都是這棵樹上的一個節點。

Vue.js 通過 Virtual DOM 提高了 DOM 操作的效率，當我們修改頁面時，Vue 會先更新這個 Virtual DOM，進行高效的差異比對（diffing）機制，找到需要改變的地方，最後才將改變渲染到真實 DOM。
這種方式讓 Vue.js 的動畫更新更加流暢且性能更好。

CSS animations 的應用與分類

根據動態效果的複雜度，CSS animations 通常分成兩類：

• 過渡效果（Transitions）：這是最常見的動畫方式，用於平滑改變元素的狀態。例如，當滑鼠懸停(Hover)在按鈕上時，按鈕的顏色、大小或陰影會逐漸變化，這樣的過渡效果能使界面更自然、優雅，並提升使用者體驗。

• 關鍵幀動畫（Keyframe Animations）：適合更複雜的動畫。通過定義關鍵幀（Keyframes），可以在特定的時間點指定元素的狀態變化，例如讓方塊從左到右滑動，或者隨著時間改變元素的大小和透明度。

Vue.js 與 CSS 的結合應用

在處理動畫和過渡效果時，Vue.js 提供了兩個強大的工具：

• <Transition> 元件：用於管理元素的進入和離開動畫效果，簡化了過渡效果的實現。開發者只需定義進場和退場的動畫，Vue.js 就會自動管理動畫過程。

• CSS 動畫結合（animation）：除了基本的過渡效果，Vue.js 還支持更複雜的動畫，這通常通過 CSS 的 @keyframes 或第三方動畫庫（如 Animate.css 和 GreenSock）來實現。這些 CSS 動畫可以與 Vue.js 結合使用，這能讓頁面表現力大大提升，尤其適合需要精緻動畫效果的高端品牌網站。

解構 Vue.js 動態效果：<Transition> 的應用

接下來我們將實作如何利用 Vue.js 的 <Transition> 元件實現最常見的文字進入/退出效果。這些效果可以用來強化網站的動態感，並增強使用者的互動體驗，尤其適合在商業網站中展示促銷信息、產品特色等。

文字淡入淡出效果

實作：淡入淡出效果（Fade In/Out）

• 應用場景：淡入淡出效果常見於文本或圖片的顯示與隱藏，這種過渡方式非常適合於產品展示或廣告橫幅商店Logo中，讓畫面更自然、流暢。
• 程式碼：

 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from 'vue';

 const show = ref(true);

 onMounted(() => {
   const intervalId = setInterval(() => (show.value = !show.value), 1500);
   onUnmounted(() => clearInterval(intervalId));
 });
 </script>

 <template>
   <div class="flex flex-col justify-center items-center pt-68 text-30">
     <transition name="fade">
       <div v-if="show">Hello, I ❤️ Coding !</div>
     </transition>
   </div>
 </template>

 <style scoped>
 .fade-enter-active, .fade-leave-active {
   transition: opacity 1.5s;
 }
 .fade-enter, .fade-leave-to {
   opacity: 0;
 }
 </style>

執行邏輯

<template>
  <div class="flex flex-col justify-center items-center pt-10">
    <transition name="fade">
      <div v-if="show" class="content mt-4">Hello, I ❤️ Coding!</div>
    </transition>
  </div>
</template>

<transition> 元件包一個 div，並使用了 v-if="show" 來決定這個 div 是否顯示。

當 show 變為 true 時，div 會進場（顯示），當 show 變為 false 時，div 會退場（隱藏）。

並且class= "fade" 的過渡效果，讓 div 在進場和退場時都有一個淡入淡出的動畫。

進出場過渡效果的 CSS 規則

.fade-enter-active, .fade-leave-active {
  transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

這段 CSS 定義了進場和退場時的動畫細節：

1. .fade-enter-active 和 .fade-leave-active：

   • 這些類別負責控制進出場時的動畫過渡效果。在這裡，transition: opacity 1.5s 意味著透明度的變化會在 1.5 秒內發生，讓元素看起來有淡入或淡出的效果。

2. .fade-enter 和 .fade-leave-to：

   • fade-enter 是元素剛進場時的初始狀態，fade-leave-to 是元素開始退場時的狀態。這裡將元素的 opacity 設為 0，表示元素會從完全透明開始，然後逐漸變為不透明（進場），或者從不透明逐漸變回透明（退場）。

過渡效果的動作

• 當 show 變為 true 時，Vue.js 會添加 fade-enter 和 fade-enter-active 類別，元素會從透明逐漸變為不透明，實現淡入效果。
• 當 show 變為 false 時，Vue.js 會添加 fade-leave-active 和 fade-leave-to 類別，元素會從不透明逐漸變回透明，實現淡出效果。

總結來說，<transition> 讓我們可以很容易地對元素的顯示和隱藏過程應用動畫效果，這裡使用了 "fade" 過渡效果，透過 CSS 控制透明度的變化來實現淡入淡出的動畫。

結語

嘿嘿～學會這些進出場效果後，你已經掌握了 70% 的動效設計了！趕快試試看，讓你的網站變得更有層次感吧～ 🎉