前兩天把動畫基礎看完了，今天來看看其它的設定。

設定初始載入時的漸變

如果想要設定一開始載入畫面時元件的漸變效果，可以透過設定appear屬性來達成，如：<transition appear>。
就像前兩天學的，一樣分為三階段：

• appear-class 「載入」時開始的樣式。
• appear-to-class 「載入」過程的樣式。
• appear-active-class 「載入」結束時的樣式。

簡單使用範例：

  <transition
    appear
    appear-class="show-appear-class"
    appear-to-class="show-appear-to-class"
    appear-active-class="show-appear-active-class"
  >
  </transition>

先在<transition>標籤內加入appear，接著如「自定動畫類別」一樣，可以自已為 class name 命名。

初始載入 JavaScript Hooks

同樣的也能替它綁定JavaScript Hooks：

• beforeAppear：載入前。
• appear：載入時。
• afterAppear：載入後。
• appearCancelled：取消載入(載入開始後)。

簡單使用範例：

<div id="app">
  <transition
    appear
    @before-appear="beforeAppear"
    @appear="appear"
    @after-appear="afterAppear"
    @appear-cancelled="appearCancelled">
    <div v-if="change" class="ant_man_style"></div>
  </transition>
</div>

key

以上範例<transition>裡都只用到一個標籤元件，而Vue為了效率只會替換相同標籤內部的內容，那當有多個相同的標籤元件該怎麼做比較好？你可以對相同的標籤元件下key讓vue來區分它們，如下：

<transition enter-active-class="zoom-enter-active" leave-active-class="zoom-leave-active">
  <div v-if="change" class="ant_man_style" key="ant_man"></div>
  <div v-else class="wasp_style" key="wasp"></div>
</transition>

漸變模式

漸變模式分為「in-out」及「out-in」，我們一個一個來看：

• in-out模式

  1.新加入的元件做漸變進入。
  2.漸變進入結束後，原存在的元件再漸變離開。

將前天的範例改寫部份為以下：

<button @click="change = !change">縮放控制器</button>
<transition mode="in-out">
  <div v-if="change" class="ant_man_style" key="ant_man"></div>
  <div v-else class="wasp_style" key="wasp"></div>
</transition>

以上in-out你會發現第一次按時：「黃蜂女會先放大 > 然後換蟻人縮小 > 最後蟻人區塊消失」。

• out-in模式

  1.原存在的元件漸變離開。
  2.漸變離開結束後，新元件再漸變進來。

將前天的範例改寫部份為以下：

<button @click="change = !change">縮放控制器</button>
<transition mode="out-in">
  <div v-if="change" class="ant_man_style" key="ant_man"></div>
  <div v-else class="wasp_style" key="sasp"></div>
</transition>

以上out-in你會發現第一次按時：「蟻人會先縮小 > 蟻人區塊消失 > 最後黃蜂女才放大」。

但如果你沒指定元件「漸變模式(順序)」，那它們預設會是同步處理，也就是蟻人與黃蜂女將同時發生漸變動畫。

以上就是今天的內容！