Vue.js 動畫與過渡效果實戰

来源:https://www.cnblogs.com/Amd794/p/18231550
-Advertisement-
Play Games

title: Vue.js 動畫與過渡效果實戰 date: 2024/6/4 updated: 2024/6/4 description: 這篇文章介紹瞭如何在網頁設計中使用過渡動畫和組件效果，以及如何利用模式和列表展示信息。還提到了使用鉤子實現組件間通信的方法。 categories: 前端開發 ...


title: Vue.js 動畫與過渡效果實戰
date: 2024/6/4
updated: 2024/6/4
description:
這篇文章介紹瞭如何在網頁設計中使用過渡動畫和組件效果，以及如何利用模式和列表展示信息。還提到了使用鉤子實現組件間通信的方法。
categories:

  • 前端開發

tags:

  • 過渡
  • 動畫
  • 組件
  • 效果
  • 模式
  • 列表
  • 鉤子

image

第一部分：基礎知識

第1章：Vue.js 過渡系統簡介

Vue.js 提供了過渡效果的支持，使得在不同狀態之間切換時能夠以更加生動和用戶友好的方式呈現。本章將介紹 Vue.js 過渡系統的基本概念、工作原理以及如何使用過渡效果來提升用戶體驗。

1.1 Vue.js 過渡系統的基本概念

Vue.js 中的過渡效果主要通過 <transition> 或 <transition-group> 組件來實現。這些組件能夠包裹任何內容，當這些內容發生變化時，Vue.js 會自動應用過渡效果。例如，當一個元素被創建、銷毀或者更改時，Vue.js 會自動應用進入、離開或更新過渡。

1.2 過渡類名的生命周期

Vue.js 為過渡效果自動添加和移除一些類名，這些類名遵循特定的生命周期。主要包括以下幾個階段：

  • .v-enter：元素進入過渡的初始狀態。
  • .v-enter-active：元素進入過渡的激活狀態，會應用動畫效果。
  • .v-enter-to：元素進入過渡的結束狀態，可以認為是完全進入的狀態。
  • .v-leave：元素離開過渡的初始狀態。
  • .v-leave-active：元素離開過渡的激活狀態，會應用動畫效果。
  • .v-leave-to：元素離開過渡的結束狀態，可以認為是完全離開的狀態。
1.3 使用 <transition> 組件

<transition> 組件是 Vue.js 實現過渡效果的基礎。它可以用來包裹任何內容，當內容發生變化時，會自動應用過渡效果。使用 <transition> 組件時，需要提供 name 屬性來定義過渡的類名首碼。

以下是一個簡單的例子，展示瞭如何使用 <transition> 組件來實現一個簡單的進入過渡效果：

<template>
  <transition name="fade">
    <div v-if="show">Hello, World!</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

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

在這個例子中，當 show 變數的值為 true 時，<div> 元素會進入過渡狀態，應用 .fade-enter-active 和 .fade-enter 類名，逐漸變得可見。當 show 變數的值為 false 時，<div> 元素會離開過渡狀態，應用 .fade-leave-active 和 .fade-leave-to 類名，逐漸變得不可見。
歸檔 | cmdragon's Blog

第2章：CSS 過渡

2.1 CSS 過渡基礎

CSS 過渡是一種基於 CSS 實現的動畫效果，它可以在元素狀態變化時應用漸變效果。CSS 過渡通常需要設置兩個屬性：

  • transition：用於定義過渡效果的屬性和持續時間。
  • transition-property：用於定義哪些屬性需要應用過渡效果。

例如，以下是一個簡單的 CSS 過渡效果，實現了一個元素從左到右的淡入淡出效果：

.fade-in-out {
  transition: transform 1s, opacity 1s;
}

.fade-in-out.enter-active,
.fade-in-out.leave-active {
  transform: translateX(100px);
  opacity: 0;
}

.fade-in-out.enter-active {
  transform: translateX(0);
  opacity: 1;
}

.fade-in-out.leave-active {
  transform: translateX(-100px);
  opacity: 0;
}

在這個例子中，我們使用了 transition 屬性來定義需要應用過渡效果的屬性和持續時間，並使用了 transition-property 屬性來定義具體的過渡效果。

2.2 在 Vue.js 中應用 CSS 過渡

在 Vue.js 中應用 CSS 過渡非常簡單，只需要在 <transition> 組件中添加一個 css 屬性，並設置為 true 即可。這樣，Vue.js 會自動檢測元素的變化，並應用相應的過渡效果。

以下是一個簡單的例子，展示瞭如何在 Vue.js 中應用 CSS 過渡效果：

<template>
  <transition name="fade-in-out" css="true">
    <div v-if="show">Hello, World!</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<style>
.fade-in-out {
  transition: transform 1s, opacity 1s;
}

.fade-in-out.enter-active,
.fade-in-out.leave-active {
  transform: translateX(100px);
  opacity: 0;
}

.fade-in-out.enter-active {
  transform: translateX(0);
  opacity: 1;
}

.fade-in-out.leave-active {
  transform: translateX(-100px);
  opacity: 0;
}
</style>

在這個例子中，我們使用了 css 屬性來告訴 Vue.js 應用 CSS 過渡效果，併在 <style> 標簽中定義了具體的過渡效果。

2.3 示例：淡入淡出效果

以下是一個完整的示例，實現了一個簡單的淡入淡出效果：

<template>
  <transition name="fade-in-out" css="true">
    <div v-if="show">Hello, World!</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<style>
.fade-in-out {
  transition: opacity 1s;
}

.fade-in-out.enter-active,
.fade-in-out.leave-active {
  opacity: 0;
}

.fade-in-out.enter-active {
  opacity: 1;
}
</style>

在這個例子中，當 show 變數的值為 true 時，元素會淡入淡出，應用 .fade-in-out-enter-active 和 .fade-in-out-leave-active 類名，逐漸變得可見。當 show 變數的值為 false 時，元素會淡入淡出，應用 .fade-in-out-leave-active 類名，逐漸變得不可見。

第3章：CSS 動畫

3.1 CSS 動畫基礎

CSS 動畫是通過使用 @keyframes 規則和 animation 屬性在網頁中創建動畫效果的一種方式。@keyframes 規則用於定義動畫序列，而 animation 屬性用於將動畫應用到元素上。

以下是一個簡單的 CSS 動畫示例，它將一個元素從左側移動到右側，併在這個過程中改變其顏色：

@keyframes moveAndColorChange {
  0% {
    left: 0;
    background-color: red;
  }
  100% {
    left: 100px;
    background-color: blue;
  }
}

.animated-element {
  animation: moveAndColorChange 2s linear infinite;
}

在這個例子中，moveAndColorChange 是一個動畫名稱，它定義了動畫從開始到結束的狀態變化。animation 屬性應用於 .animated-element 類，指定了動畫名稱、持續時間、運動曲線和重覆次數。

3.2 在 Vue.js 中應用 CSS 動畫

在 Vue.js 中，你可以通過在組件中使用 <transition> 組件或者直接在元素上使用 @click 事件監聽器來應用 CSS 動畫。使用 <transition> 組件時，可以通過 name 屬性指定動畫對應的 CSS 類名，並通過 css 屬性告訴 Vue.js 是否使用 CSS 過渡。

以下是一個在 Vue.js 中應用 CSS 動畫的例子，它使用 <transition> 組件來實現一個點擊按鈕時元素旋轉的效果：

<template>
  <div>
    <button @click="toggleRotation">Toggle Rotation</button>
    <transition name="rotate">
      <div v-if="rotate" class="rotating-element"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rotate: false
    };
  },
  methods: {
    toggleRotation() {
      this.rotate = !this.rotate;
    }
  }
};
</script>

<style>
.rotate-enter-active, .rotate-leave-active {
  animation: rotate 2s linear infinite;
}

.rotate-leave-to {
  transform: rotate(360deg);
  opacity: 0;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rotating-element {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
}
</style>

在這個例子中，點擊按鈕會切換 rotate 變數的值，從而使得 .rotating-element 元素進入或離開過渡狀態。rotate 類定義了動畫的關鍵幀和持續時間。rotate-enter-active 和 rotate-leave-active 類應用於進入和離開過渡狀態的元素，而 rotate-leave-to 類定義了離開過渡的最終狀態。

3.3 示例：旋轉動畫

以下是一個完整的示例，實現了一個簡單的旋轉動畫：

<template>
  <div>
    <button @click="toggleRotation">Toggle Rotation</button>
    <transition name="rotate">
      <div v-if="rotate" class="rotating-element"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rotate: false
    };
  },
  methods: {
    toggleRotation() {
      this.rotate = !this.rotate;
    }
  }
};
</script>

<style>
.rotate-enter-active, .rotate-leave-active {
  animation: rotate 2s linear infinite;
}

.rotate-leave-to { transform: rotate(360deg); opacity: 0; }

@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.rotating-element { width: 100px; height: 100px; background-color: blue; display: inline-block; }

在這個完整的示例中，我們創建了一個 Vue 組件，其中包含一個按鈕和一個正方形元素。按鈕的點擊事件通過 toggleRotation 方法來切換 rotate 數據屬性的值，從而控制正方形元素的顯示與隱藏。 當正方形元素進入或離開時，<transition> 組件會應用名為 rotate 的 CSS 動畫。這個動畫通過 @keyframes 規則定義，使得元素在 2 秒內從 0 度旋轉到 360 度。rotate-enter-active 和 rotate-leave-active 類確保動畫在元素進入和離開時都被應用。 rotate-leave-to 類定義了元素在離開過渡時的最終狀態，即旋轉 360 度並逐漸消失（通過 opacity: 0）。 這個示例展示瞭如何在 Vue.js 中結合 CSS 動畫和 Vue 的過渡系統來創建動態的用戶界面效果。通過這種方式，開發者可以輕鬆地為組件添加複雜的動畫效果，而不需要深入瞭解 JavaScript 動畫庫。

第4章：JavaScript 鉤子

在 Vue.js 中，除了使用 CSS 過渡和動畫來控制組件的過渡效果外，還可以使用 JavaScript 鉤子來實現更複雜的過渡邏輯。JavaScript 鉤子允許你在過渡的不同階段執行自定義的 JavaScript 代碼，從而提供更多的靈活性和控制。

使用 JavaScript 鉤子控制過渡

Vue 的 <transition> 組件提供了六個 JavaScript 鉤子，可以在過渡的不同階段執行：

  1. beforeEnter(el)
  2. enter(el, done)
  3. afterEnter(el)
  4. enterCancelled(el)
  5. beforeLeave(el)
  6. leave(el, done)
  7. afterLeave(el)
  8. leaveCancelled(el)

其中，enter 和 leave 鉤子接受第二個參數 done，這是一個回調函數，當動畫完成時應該調用它。

結合 CSS 過渡與 JavaScript 鉤子

你可以結合使用 CSS 過渡和 JavaScript 鉤子來創建複雜的過渡效果。例如，你可以使用 CSS 過渡來設置初始的過渡效果，然後使用 JavaScript 鉤子來添加額外的動畫或效果。

示例：動態過渡效果

下麵是一個使用 JavaScript 鉤子來控制過渡的示例：

<template>
  <button @click="show = !show">Toggle</button>
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
  >
    <p v-if="show">Hello, Vue!</p>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    beforeEnter(el) {
      // 在過渡開始前設置元素的初始狀態
      el.style.opacity = 0;
    },
    enter(el, done) {
      // 在過渡期間設置元素的狀態
      Velocity(el, { opacity: 1, fontSize: '1.5em' }, { duration: 300 });
      Velocity(el, { fontSize: '1em' }, { complete: done });
    },
    leave(el, done) {
      // 在離開過渡期間設置元素的狀態
      Velocity(el, { opacity: 0, fontSize: '2em' }, { duration: 600 });
      Velocity(el, { fontSize: '1em' }, { complete: done });
    }
  }
};
</script>

在這個示例中，我們使用了 Velocity.js 動畫庫來創建更複雜的動畫效果。在 enter 和 leave 鉤子中，我們使用 Velocity 來改變元素的 opacity 和 fontSize。通過這種方式，我們可以創建出比純 CSS 過渡更豐富的動態效果。

通過結合 CSS 過渡和 JavaScript 鉤子，Vue.js 提供了強大的工具來創建各種複雜的過渡和動畫效果，使得用戶界面更加生動和吸引人。

第二部分：高級應用

第5章：過渡模式

在Vue.js中，過渡模式（Transition Modes）是指在元素 entering 和 leaving 時的動畫順序。Vue提供了兩種預設的過渡模式：in-out和out-in。

  • in-out模式：新元素先進入，然後舊元素離開。
  • out-in模式：舊元素先離開，然後新元素進入。

這兩種模式在多個元素同時進行過渡時尤其有用，比如在一個列表中添加或刪除元素時。

示例：列表項過渡

下麵是一個Vue.js示例，展示瞭如何使用in-out和out-in模式來處理列表項的過渡。

<template>
  <div>
    <button @click="addItem">添加項目</button>
    <button @click="removeItem">移除項目</button>
    <transition-group name="list" mode="in-out">
      <div v-for="(item, index) in items" :key="item" class="item">
        {{ item }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    addItem() {
      this.items.push(this.items.length + 1);
    },
    removeItem() {
      this.items.splice(0, 1);
    }
  }
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

在這個示例中，我們有一個transition-group，它使用了in-out模式。當點擊“添加項目”按鈕時，新項目會進入，而當前第一個項目會離開。當點擊“移除項目”按鈕時，當前第一個項目會離開，然後新項目會進入。

<transition-group>的name屬性用於定義動畫的名稱，這樣我們可以在CSS中為這個動畫定義樣式。在這個例子中，我們定義了enter-active和leave-active來指定進入和離開的過渡效果，以及enter-from和leave-to來指定進入和離開的起始狀態。

通過這種方式，我們可以控制多個元素同時過渡時的動畫順序和效果，提升用戶體驗。

第6章：動態組件與非同步組件

動態組件的過渡

在Vue中，動態組件的過渡是指當組件被動態切換時，Vue會提供平滑的過渡效果。為了實現這一點，Vue內置了<component>標簽，我們可以通過它的is屬性綁定一個動態的組件名稱。

當使用<component>標簽時，你可以使用Vue的<transition>或<transition-group>來包裹它，以便為動態組件提供過渡效果。

下麵是一個動態組件過渡的示例：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">切換到A</button>
    <button @click="currentComponent = 'ComponentB'">切換到B</button>
    
    <transition name="fade">
      <component :is="currentComponent"></component>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA: {
      template: '<div>組件A</div>'
    },
    ComponentB: {
      template: '<div>組件B</div>'
    }
  }
};
</script>

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

在這個示例中，我們有兩個按鈕用於切換組件，currentComponent存儲當前活動的組件名。<transition>包裹著<component>，並定義了進入和離開的過渡效果。當點擊按鈕切換組件時，Vue會提供平滑的淡入淡出效果。

非同步組件的過渡

非同步組件是指那些需要動態載入的組件，通常用於大型應用中，可以實現代碼分割和懶載入。在使用非同步組件時，我們同樣可以為它們添加過渡效果。

下麵是一個非同步組件過渡的示例：

<template>
  <div>
    <button @click="loadComponent('ComponentA')">載入組件A</button>
    <button @click="loadComponent('ComponentB')">載入組件B</button>
    
    <transition name="fade">
      <component :is="currentComponent"></component>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    loadComponent(name) {
      this.currentComponent = name;
      // 這裡是非同步載入組件的邏輯，例如使用import()
    }
  },
  components: {
    ComponentA: {
      template: '<div>組件A</div>'
    },
    ComponentB: {
      template: '<div>組件B</div>'
    }
  }
};
</script>

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

在這個示例中，我們通過loadComponent方法動態載入組件。當點擊按鈕載入新的組件時，Vue會使用定義好的過渡效果來平滑地顯示新的組件。

請註意，非同步組件的過渡效果可能不會像同步組件那樣直觀，因為非同步組件可能不會立即渲染。確保非同步組件在需要時已經載入和渲染，以便過渡效果可以正確應用。

第7章：列表過渡

使用 組件

在Vue中，<transition-group> 組件是用於渲染一個動態列表的過渡效果的。它不同於普通的 <transition> 組件，後者只能包裹單個元素，<transition-group> 則可以包裹多個元素，並且它會根據元素的添加和移除來更新它的子元素列表。

為了使用 <transition-group>，你需要在組件的 <script> 部分引入 TransitionGroup 類，並使用 components 選項註冊它。

列表項的過渡效果

在 <transition-group> 中，每個列表項都可以有自己的過渡效果。通過為每個列表項添加 <transition> 標簽，並設置適當的過渡屬性，你可以為列表項定義不同的動畫效果。

示例：列表排序與過濾的過渡

下麵是一個使用 <transition-group> 和 <transition> 的示例，展示瞭如何在列表排序和過濾時應用過渡效果：

<template>
  <div>
    <button @click="sort('asc')">升序排序</button>
    <button @click="sort('desc')">降序排序</button>
    <button @click="filter('new')">顯示新項目</button>
    <button @click="filter('old')">顯示舊項目</button>
    
    <transition-group name="list" tag="ul">
      <li v-for="item in filteredAndSortedItems" :key="item.id">
        {{ item.text }}
      </li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '項目1', new: true },
        { id: 2, text: '項目2', new: false },
        { id: 3, text: '項目3', new: true },
        // ...更多項目
      ],
      currentSort: 'asc',
      currentFilter: 'all'
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        return this.currentFilter === 'all' || (item.new && this.currentFilter === 'new') || (!item.new && this.currentFilter === 'old');
      });
    },
    sortedItems() {
      return [...this.filteredItems].sort((a, b) => {
        if (this.currentSort === 'asc') {
          return a.text.localeCompare(b.text);
        } else {
          return b.text.localeCompare(a.text);
        }
      });
    },
    filteredAndSortedItems() {
      return this.sortedItems;
    }
  },
  methods: {
    sort(direction) {
      this.currentSort = direction;
    },
    filter(filter) {
      this.currentFilter = filter;
    }
  }
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

在這個示例中，我們有一個包含多個項目的列表。通過點擊按鈕，用戶可以對列表進行排序和過濾。<transition-group> 用於包裹整個列表，而 <transition> 用於包裹每個列表項。當項目因為排序或過濾而移動位置時，<transition> 會提供平滑的過渡效果。

.list-enter-active 和 .list-leave-active 類定義了過渡效果，list-enter-from 和 list-leave-to 類定義了過渡的起始狀態和結束狀態。在這個示例中，我們設置了透明度為0和水平位移30像素，以模擬項目離開視圖的效果。

第8章：第三方動畫庫

集成第三方動畫庫（如 Animate.css）

Animate.css 是一個預設了多種CSS動畫效果的庫，使用它可以輕鬆地為元素添加動畫效果。以下是如何在Vue項目中集成Animate.css的步驟：

  1. 安裝 Animate.css：

    npm install animate.css --save

  2. 在Vue組件中引入並使用：

    import 'animate.css';

  3. 在模板中應用動畫：

    <template>
  <div class="animated" :class="animationType" v-if="show">Hello, World!</div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      animationType: 'bounce'
    };
  },
  mounted() {
    setTimeout(() => {
      this.show = true;
    }, 1000);
  }
};
</script>

在這個例子中，我們使用了 bounce 動畫效果。當組件掛載後，元素會在1秒後顯示，並應用 bounce 動畫。

使用 Velocity.js 進行高性能動畫

Velocity.js 是一個高性能的JavaScript動畫引擎，它與jQuery的$.animate()有著相同的API，但性能更優。以下是如何在Vue項目中使用Velocity.js的步驟：

  1. 安裝 Velocity.js：

    npm install velocity-animate --save

  2. 在Vue組件中引入並使用：

    import Velocity from 'velocity-animate';

  3. 在組件的方法中使用Velocity.js：

    <template>
  <div ref="animatedElement">Hello, World!</div>
</template>

<script>
import Velocity from 'velocity-animate';

export default {
  methods: {
    startAnimation() {
      Velocity(this.$refs.animatedElement, { opacity: 0, translateX: '100px' }, { duration: 1000 });
    }
  },
  mounted() {
    this.startAnimation();
  }
};
</script>

在這個例子中，我們使用Velocity.js來動畫化一個元素的透明度和水平位移。當組件掛載後，startAnimation 方法會被調用，開始動畫效果。

示例：複雜動畫效果

結合Animate.css和Velocity.js，我們可以創建更複雜的動畫效果。例如，我們可以使用Animate.css來觸發一個基本的動畫，然後使用Velocity.js來添加更多的動畫細節。

<template>
  <div class="animated" :class="animationType" ref="animatedElement" v-if="show">Hello, World!</div>
</template>

<script>
import 'animate.css';
import Velocity from 'velocity-animate';

export default {
  data() {
    return {
      show: false,
      animationType: 'bounceIn'
    };
  },
  mounted() {
    setTimeout(() => {
      this.show = true;
      Velocity(this.$refs.animatedElement, { scale: 1.2 }, { duration: 500, easing: 'ease-in-out' });
    }, 1000);
  }
};
</script>

在這個例子中，我們首先使用Animate.css的 bounceIn 動畫來讓元素以彈跳的方式出現。然後，我們使用Velocity.js來增加一個縮放效果，使元素在出現後放大到1.2倍，然後恢復到原始大小。這種組合可以創造出更加豐富和複雜的動畫效果。

第三部分：實戰案例

第9章：構建動畫導航菜單

設計動畫導航菜單

設計動畫導航菜單時，需要考慮以下幾個關鍵點：

  1. 用戶體驗：確保動畫自然、流暢，不會造成用戶操作上的困擾。
  2. 相容性：導航菜單應該在各種設備和瀏覽器上都能良好工作。
  3. 交互性：菜單應該有明確的交互反饋，比如當用戶點擊或懸停在菜單項上時，應有相應的動畫效果。
  4. 性能：動畫效果不應過於複雜，以免影響頁面的載入速度和性能。
實現平滑的菜單展開與收起

為了實現平滑的菜單展開與收起效果，我們可以使用CSS3的transition屬性或者@keyframes規則，結合JavaScript來控制。以下是一個簡單的例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Navigation Menu</title>
<style>
  /* 基本樣式 */
  nav {
    background-color: #333;
    color: white;
    padding: 10px 0;
  }
  nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
  }
  nav li {
    margin-right: 20px;
  }
  nav a {
    color: white;
    text-decoration: none;
    padding: 5px 10px;
    display: block;
    transition: background-color 0.3s ease;
  }
  nav a:hover, nav a:focus {
    background-color: #555;
  }

  /* 展開與收起的動畫 */
  @keyframes expand {
    from {
      height: 0;
    }
    to {
      height: auto;
    }
  }

  .expanded {
    animation: expand 0.5s ease forwards;
  }
</style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <script>
    // JavaScript代碼來控制菜單的展開與收起
    document.addEventListener('DOMContentLoaded', function() {
      const navLinks = document.querySelectorAll('nav ul li a');

      navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
          e.preventDefault();
          const nav = this.parentElement.parentElement;
          nav.classList.toggle('expanded');
        });
      });
    });
  </script>
</body>
</html>

在這個例子中，我們定義了一個關鍵幀動畫expand，當用戶點擊菜單項時，菜單項的父元素（nav）會切換一個expanded類，從而觸發動畫。動畫使得菜單項的高度從0平滑地過渡到auto，實現了展開效果。
AD：漫畫首頁

響應式設計的考慮

在響應式設計中，導航菜單應該能夠適應不同屏幕尺寸。這通常通過媒體查詢（@media）來實現。例如：

@media screen and (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
  nav li {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

上述CSS規則意味著當屏幕寬度小於768像素時，導航菜單會變成垂直排列，並且每個列表項會有10像素的垂直間距。這樣的設計可以確保用戶在小屏幕設備上也能輕鬆地使用導航菜單。

第10章：表單輸入的過渡效果

表單元素的過渡效果

在網頁設計中，表單元素的過渡效果可以提升用戶體驗，讓表單填寫過程更加流暢。過渡效果通常使用CSS的transition屬性來實現。以下是一個簡單的例子，展示瞭如何為表單元素添加過渡效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transitioned Form Elements</title>
<style>
  /* 基本樣式 */
  form {
    margin: 20px;
  }
  input, select, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    transition: border-color 0.3s;
  }
  input:focus, select:focus, textarea:focus {
    border-color: #007bff;
  }
</style>
</head>
<body>
  <form>
    <input type="text" placeholder="Name">
    <input type="email" placeholder="Email">
    <select>
      <option value="">Select a country</option>
      <option value="usa">USA</option>
      <option value="china">China</option>
    </select>
    <textarea placeholder="Message"></textarea>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

在這個例子中，我們為輸入框、下拉選擇和文本域添加了transition屬性，當用戶聚焦在這些元素上時，邊框顏色會平滑地過渡到藍色，從而給用戶一個視覺上的反饋。

錯誤提示的動畫展示

錯誤提示動畫可以提高用戶填寫表單時的互動體驗，以下是一個簡單的例子，展示瞭如何使用CSS動畫來展示錯誤提示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error Animation</title>
<style>
  /* 基本樣式 */
  .error {
    color: red;
    display: none;
  }
  input:invalid + .error {
    display: block;
    animation: errorFadeIn 0.3s;
  }

  @keyframes errorFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>
</head>
<body>
  <form>
    <input type="text" placeholder="Name">
    <div class="error">Invalid input</div>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

在這個例子中，當用戶輸入無效數據（例如，輸入的姓名不包含字母），輸入框後面的錯誤提示會通過動畫逐漸顯示出來。動畫使得錯誤提示平滑地淡入，提高了用戶體驗。

示例：互動式表單驗證

互動式表單驗證可以即時告知用戶輸入是否有效，以下是一個結合了表單過渡效果和錯誤提示動畫的完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Form Validation</title>
<style>
  /* 基本樣式 */
  form {
    margin: 20px;
  }
  input, select, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    transition: border-color 0.3s;
  }
  input:focus, select:focus, textarea:focus {
    border-color: #007bff;
  }

  /* 錯誤提示樣式 */
  .error {
    color: red;
    display: none;
  }
  input:invalid + .error {
    display: block;
    animation: errorFadeIn 0.3s;
  }

  @keyframes errorFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>
</head>
<body>
  <form>
    <input type="text" required pattern="[A-Za-z\s]+" placeholder="Name">
    <div class="error">Please enter a valid name (only letters and spaces allowed).</div>
    <input type="email" required placeholder="Email">
    <div class="error">Please enter a valid email address.</div>
    <select required>
      <option value="">Select a country</option>
      <option value="usa">USA</option>
      <option value="china">China</option>
    </select>
    <div class="error">Please select a country.</div>
    <textarea required placeholder="Message"></textarea>
    <div class="error">Please enter a message.</div>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

在這個完整的示例中，我們為每個表單元素添加了required屬性和一個pattern屬性（對於姓名輸入框），以確保用戶必須填寫這些欄位，並且輸入的數據符合特定的格式。每個輸入框後面都跟隨一個錯誤提示，當輸入無效時，這些錯誤提示會通過動畫逐漸顯示出來。

此外，我們還為表單元素添加了過渡效果，當用戶聚焦在輸入框上時，邊框顏色會平滑地過渡到藍色，提供了一個視覺上的反饋。這種結合了過渡效果和錯誤提示動畫的互動式表單驗證，不僅提高了用戶體驗，也使得表單填寫過程更加直觀和友好。

第11章：頁面載入與離開過渡

在一個單頁應用 (Single Page Application, SPA) 中，頁面的載入和離開過渡效果可以為用戶提供更好的視覺體驗。在這個示例中，我們將演示一個簡單的單頁應用，其中包含一個導航欄和兩個頁面。當用戶點擊導航欄中的鏈接時，頁面會以動畫的形式平滑地過渡到目標頁面。
AD：專業搜索引擎

首先，我們需要創建一個基本的 HTML 結構，包括導航欄和兩個頁面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Transition Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <a href="#page-1">Page 1</a>
      <a href="#page-2">Page 2</a>
    </nav>
  </header>
  <main>
    <section id="page-1" class="page">
      <h1>Page 1</h1>
      <p>Welcome to Page 1!</p>
    </section>
    <section id="page-2" class="page">
      <h1>Page 2</h1>
      <p>Welcome to Page 2!</p>
    </section>
  </main>
  <script src="scripts.js"></script>
</body>
</html>

接下來，我們需要在 CSS 文件中添加一些樣式和過渡效果：

/* styles.css */
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

header, main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

nav a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  background-color: #333;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(100%);
  transition: transform 0.5s ease;
}

.page.active {
  transform: translateX(0);
}

最後，我們需要在 JavaScript 文件中添加一些代碼，以便在用戶點擊導航欄鏈接時觸發頁面過渡效果：

// scripts.js
const links = document.querySelectorAll('nav a');
const pages = document.querySelectorAll('.page');

links.forEach((link, index) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();

    // Remove the 'active' class from the current page
    pages.forEach((page) => {
      page.classList.remove('active');
    });

    // Add the 'active' class to the target page
    const targetPage = document.querySelector(link.getAttribute('href'));
    targetPage.classList.add('active');
  });
});

在這個示例中，我們使用了 CSS 過渡和 JavaScript 動畫來實現單頁應用的頁面載入和離開過渡效果。當用戶點擊導航欄中的鏈接時，我們使用 JavaScript 將當前頁面的active類去除，並將目標頁面的active類添加上，從而實現了頁面之間平滑的過渡效果。

需要註意的是，由於我們在 CSS 中添加了overflow: hidden屬性，因此在頁面過渡期間，用戶將無法滾動頁面。如果你希望在頁面過渡期間保留滾動功能，可以使用其他的方法來實現頁面過渡效果。

第四部分：性能優化與最佳實踐

第12章：性能優化

在網頁開發中，性能優化是一個至關重要的環節，它直接關係到用戶體驗和網站的可用性。以下是關於性能優化的一些關鍵點和最佳實踐：

避免過度動畫

動畫可以增強用戶體驗，但過度使用動畫會導致性能問題。以下是一些避免過度動畫的建議：

  • 限制動畫數量：不要在頁面上同時運行多個複雜的動畫，這會消耗大量的CPU資源。
  • 簡化動畫：使用簡單的動畫效果，如淡入淡出、平移等，而不是複雜的3D變換或高幀率的動畫。
  • 使用CSS動畫：儘可能使用CSS動畫而不是JavaScript動畫，因為CSS動畫可以利用硬體加速，通常性能更好。
使用硬體加速

硬體加速可以顯著提高動畫和複雜視覺效果的性能。以下是如何使用硬體加速的一些方法：

  • 使用translate3d、translateZ等3D變換：這些屬性可以觸發GPU加速，即使它們實際上並沒有進行3D變換。
  • 使用will-change屬性：這個CSS屬性可以提前告知瀏覽器哪些元素即將發生變化，從而讓瀏覽器提前準備硬體加速。
  • 避免不必要的硬體加速：雖然硬體加速可以提高性能，但過度使用也會導致記憶體消耗增加，因此應該適度使用。
性能測試與分析

性能測試和分析是優化性能的關鍵步驟。以下是一些常用的性能測試工具和方法：

  • Chrome DevTools：Chrome瀏覽器內置的開發者工具提供了性能分析面板，可以用來記錄和分析頁面載入和運行時的性能。
  • Lighthouse：這是一個由Google開發的開源自動化工具，用於改進網頁質量。它可以提供性能、可訪問性、漸進式Web應用等方面的審計報告。
  • WebPageTest：這是一個線上服務，可以測試網頁在不同瀏覽器和設備上的性能，並提供詳細的性能報告。

在進行性能測試時，應該關註以下指標：

  • 首次內容繪製（FCP） ：用戶看到頁面上的第一個內容所需的時間。
  • 首次有效繪製（FMP） ：頁面主要內容載入完成的時間。
  • 總阻塞時間（TBT） ：主線程被阻塞足夠長時間以防止輸入響應的總時間。
  • 交互時間（TTI） ：頁面完全交互所需的時間。

通過這些工具和指標，開發者可以識別性能瓶頸，並採取相應的優化措施。性能優化是一個持續的過程，需要不斷地測試、分析和調整。AD：首頁 | 一個覆蓋廣泛主題工具的高效線上平臺

第13章：最佳實踐

在網頁和應用開發中，最佳實踐是確保代碼高質量、易維護和用戶友好性的關鍵。以下是一些關於動畫的最佳實踐：

設計可維護的動畫代碼
  • 模塊化：將動畫代碼分割成可重用的模塊或組件，這樣可以在不同的場景中復用，同時降低維護成本。
  • 使用動畫庫：利用現有的動畫庫（如Animate.css、GreenSock Animation Platform（GSAP））可以簡化動畫創建過程，並保證性能。
  • 清晰命名：為動畫變數和函數使用清晰、描述性的命名，使得代碼易於理解和維護。
  • 註釋和文檔：為動畫代碼添加註釋，說明動畫的目的和如何工作，尤其是在動畫邏輯複雜時。
  • 避免過度耦合：確保動畫代碼與其他部分的耦合度最低，這樣修改一個部分不會影響到其他動畫。
動畫與用戶體驗
  • 目的明確：每個動畫都應該有明確的目的，比如引導用戶註意、提供反饋或改善視覺效果。
  • 適量使用：動畫可以吸引用戶註意力，但過多或過複雜的動畫可能會分散用戶註意力，影響用戶體驗。
  • 考慮性能：確保動畫在低性能設備上也能平滑運行，避免因為動畫導致頁面卡頓。
  • 可訪問性：確保動畫不會影響屏幕閱讀器的使用，例如，通過適當的ARIA標簽為動畫添加輔助信息。
響應式動畫設計
  • 媒體查詢：使用CSS媒體查詢根據不同設備和屏幕尺寸調整動畫的樣式和行為。
  • 百分比和視口單位：使用百分比、vw/vh等單位創建響應式的動畫尺寸，使動畫在不同屏幕上保持一致性。
  • 動畫緩動：使用CSS的ease、linear、ease-in、ease-out和ease-in-out等緩動函數確保動畫在不同設備上的流暢性。
  • 性能優先：在移動設備上，可能需要簡化或調整動畫以確保流暢的用戶體驗。

遵循這些最佳實踐可以幫助開發者創建既美觀又實用的動畫，提升用戶體驗，同時確保動畫代碼的可維護性和性能。

附錄

A. Vue.js 過渡與動畫 API 參考

Vue.js 提供了一套強大的過渡和動畫系統，允許開發者為組件的插入、更新和移除添加動畫效果。以下是一些關鍵的 Vue.js 過渡與動畫 API：

  • <transition> 組件：用於包裹需要添加過渡效果的元素或組件。
  • <transition-group> 組件：用於列表中的多個元素或組件，支持列表的動畫過渡。
  • name 屬性：用於自定義過渡類名，例如 name="fade" 將生成 fade-enter、fade-enter-active 等類名。
  • appear 屬性：設置頁面載入時是否應用過渡效果。
  • css 屬性：設置是否使用 CSS 過渡類名。
  • type 屬性：指定 Vue 如何確定過渡效果的結束時間。
  • mode 屬性：控制離開和進入動畫的先後順序。
  • enter-class、leave-class 等屬性：允許自定義額外的 CSS 類名。
  • JavaScript 鉤子：提供了一系列的 JavaScript 鉤子函數，如 beforeEnter、afterEnter 等，允許在動畫的不同階段執行自定義邏輯。

B. 常見問題解答

  1. 如何在 Vue.js 中添加動畫？

    • 使用 <transition> 或 <transition-group> 組件包裹需要動畫的元素，並應用相應的 CSS 類名或 JavaScript 鉤子。

  2. Vue.js 動畫不生效怎麼辦？

    • 檢查是否正確使用了 <transition> 或 <transition-group> 組件。
    • 確保 CSS 過渡或動畫類名正確應用。
    • 檢查是否有其他 CSS 規則覆蓋了過渡類名。

  3. 如何優化 Vue.js 動畫性能？

    • 使用硬體加速，如 translate3d 或 translateZ。
    • 避免在動畫中使用複雜的 CSS 屬性。
    • 使用 will-change 屬性提前通知瀏覽器元素將發生變化。

C. 資源與進一步學習

  • 官方文檔：Vue.js 過渡與動畫
  • 教程和課程：線上平臺如 Udemy、Coursera 提供了許多關於 Vue.js 動畫的高質量課程。
  • 社區和論壇：加入 Vue.js 社區，如 Reddit 的 Vue 子版塊、Vue.js 官方論壇，可以獲取幫助和分享經驗。
  • 博客和文章：定期閱讀技術博客和文章，瞭解最新的 Vue.js 動畫技術和最佳實踐。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 記錄--前端起dev從110秒減少到7秒, 開發體驗大幅提升
    ‍ 寫在開頭 點贊 + 收藏 學會 [webpack由淺入深]系列的內容 第一層: 瞭解一個小功能的完整流程. 看完可以滿足好奇心和應付原理級別面試. 第二層: 源碼陪讀, webpack源碼比較靈活, 自己看容易陷入迷惑. 文章里會貼出關鍵流程的代碼來輔助閱讀源碼. 如果你正在 ...
  • 記錄工作中常用的 JS 數組相關操作
    工作中難免會遇到各種各樣的數據結構，較為全面的瞭解數組操作，對於複雜數據結構的處理會非常有用且節省時間。所以想在這裡總結一下工作中常用的數組操作，都是一些非常基礎的知識，大家看個樂就好~ ...
  • Promise對象
    Promise 對象使用 ★ Promise 基本認識 Promise 是一個對象，用於表示非同步操作的最終完成（或失敗）及其結果值。它允許你關聯處理程式，這些處理程式將在非同步操作成功完成時或者失敗時調用，從而避免了更複雜的嵌套回調（即回調地獄）。Promise 對象通常用於執行非同步操作，如網路請求、 ...
  • Vue 3 Teleport：掌控渲染的藝術
    title: Vue 3 Teleport：掌控渲染的藝術 date: 2024/6/5 updated: 2024/6/5 description: 這篇文章介紹了Vue3框架中的一個創新特性——Teleport，它允許開發者將組件內容投送到文檔對象模型（DOM）中的任意位置，即使這個位置在組件的 ...
  • 記錄--localStorage是同步還是非同步的？為什麼？
    ‍ 寫在開頭 點贊 + 收藏 學會 首先明確一點，localStorage是同步的 一、首先為什麼會有這樣的問題 localStorage 是 Web Storage API 的一部分，它提供了一種存儲鍵值對的機制。localStorage 的數據是持久存儲在用戶的硬碟上的 ...
  • 前端怎麼解決跨域問題
    前端跨域問題的解決方案通常涉及幾種不同的方法，每種方法都有其特定的應用場景和優缺點。以下是一些常見的前端跨域解決方案： JSONP（JSON with Padding） 原理：利用<script>標簽沒有跨域限制的特性，通過動態創建<script>標簽並設置其src屬性為跨域請求的URL，來實現跨域 ...
  • Web 網頁性能及性能優化
    Web 性能是 Web 開發的一個重要方面，側重於網頁載入速度以及對用戶輸入的響應速度 通過優化網站來改善性能，可以在為用戶提供更好的體驗 網頁性能既廣泛又非常深入 1. 為什麼性能這麼重要？ 1. 性能關乎留住用戶 性能對於任何線上業務都至關重要 與載入速度緩慢、讓人感覺運行緩慢的網站相比，載入速... ...
  • Vue 前端頁面利用MediaRecorder實現音頻錄製
    Don't Talk, code is here: 重點是startRecord 方法 <template> <div> <el-tooltip class="item" effect="dark" content="再次點擊 【開始錄音】 即為重新錄製，之前錄製的將被作廢" placement=" ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類