摘要

預設情況下，<Transition> 的動畫只在元素被插入或移除時觸發。透過添加 appear 屬性，我們可以讓它在元件初次渲染時也播放一次「進入」動畫。

定義與說明

appear 是一個布林屬性。當你在 <Transition> 元件上添加它時，頁面載入後，被它包裹的元素就會立即執行一次進入動畫（應用 v-enter-from、v-enter-active 等 class）。

實作範例

appear 屬性示例

<template>
  <!-- 添加 appear 屬性 -->
  <Transition name="fade" appear>
    <h1>歡迎來到我的網站</h1>
  </Transition>
</template>

<style>
.fade-enter-active { transition: opacity 2s ease; }
.fade-enter-from { opacity: 0; }
</style>

結論

appear 屬性是一個簡單而有效的工具，能為頁面的初次載入添加優雅的入場動畫，提升應用的第一印象。

appear 初次渲染入場動畫