結合Animation

看完昨天介紹的漸變樣式類別後，今天接著再看下去！
我們除了可以像昨天一樣做簡單的動畫設定，也可以做到複雜的動畫，利用css的animation，你還可以在「動畫的過程」中做到像時間軸的功能，我以昨天的範例來示範：

<style>
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  button {
    margin-bottom: 20px;
  }
  .ant_man_style {
    background: url(../assets/ant_man.png) no-repeat center center;
    background-size: contain;
    width: 200px;
    height: 200px;
  }
  .zoom-leave-active {
    animation: special_effects 1.5s;
  }
  .zoom-enter-active {
    animation: special_effects 1.5s reverse;
  }
  @keyframes special_effects {
    0% {
      width: 200px;
      height: 200px;
      opacity: 1;
      filter: blur(0px);
    }
    15% {
      width: 150px;
      height: 150px;
      opacity: 0.5;
      filter: blur(2px);
    }
    25% {
      width: 170px;
      height: 170px;
      opacity: 1;
      filter: blur(0px);
    }
    40% {
      width: 100px;
      height: 100px;
      opacity: 0.5;
      filter: blur(2px);
    }
    50% {
      width: 115px;
      height: 115px;
      opacity: 1;
      filter: blur(0px);
    }
    65% {
      width: 50px;
      height: 50px;
      opacity: 0.5;
      filter: blur(2px);
    }
    75% {
      width: 60px;
      height: 60px;
      opacity: 1;
      filter: blur(0px);
    }
    100% {
      width: 0px;
      height: 0px;
      opacity: 0;
      filter: blur(2px);
    }
  }
</style>

animation讓你可以自由設定動畫的時間軸，並加入自已喜歡的動畫效果！
關於css animation，可以參考 卡羅奇奇的教學。

卡羅奇奇 CSS動畫-Animation(ㄧ)概述
https://ithelp.ithome.com.tw/articles/10200705

transition自定動畫類別

除了昨天提到的可在<transition>中設定「name」來「自定前綴字」，另外還可以「覆寫預設動畫類別」，只要加入下列屬性(可搭配昨天的漸變圖表來對照)，就可直接覆寫預設的類別，特別是要使用既有的動畫庫時，非常方便！

• enter-class 使用它來定義「進入動畫」時開始的樣式。
• enter-active-class 使用它來定義「進入動畫」的過程效果。
• enter-to-class 使用它來定義「進入動畫」後結束的樣式。
• leave-class 使用它來定義「離開動畫」時開始的樣式。
• leave-active-class 使用它來定義「離開動畫」的過程效果。
• leave-to-class 使用它來定義「離開動畫」後結束的樣式。

以上六個自定屬性「優先級別」高於一般漸變類別，也就是當同時存在時，「自定動畫類別」會覆蓋過原本的「一般漸變類別」，因此如果要搭配第三方CSS動畫庫(例如：Animate.css)會很好用，相信這對動畫苦手來說是一大福音！

CSS動畫庫：Animate.css
https://daneden.github.io/animate.css/

接著就來個範例吧：

<template>
  <div id="app">
    <div class="main">
      <button @click="change = !change">縮放控制器</button>
      <transition enter-active-class="zoom-enter-active" leave-active-class="zoom-leave-active">
        <div v-if="change" class="ant_man_style"></div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        change: true
      }
    }
  }
</script>

<style>
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  button {
    margin-bottom: 20px;
  }
  .ant_man_style {
    background: url(../assets/ant_man.png) no-repeat center center;
    background-size: contain;
    width: 200px;
    height: 200px;
  }
  .zoom-leave-active {
    animation: special_effects 1.5s;
  }
  .zoom-enter-active {
    animation: special_effects 1.5s reverse;
  }
  @keyframes special_effects {
    0% {
      width: 200px;
      height: 200px;
      opacity: 1;
      filter: blur(0px);
    }
    15% {
      width: 150px;
      height: 150px;
      opacity: 0.5;
      filter: blur(2px);
    }
    25% {
      width: 170px;
      height: 170px;
      opacity: 1;
      filter: blur(0px);
    }
    40% {
      width: 100px;
      height: 100px;
      opacity: 0.5;
      filter: blur(2px);
    }
    50% {
      width: 115px;
      height: 115px;
      opacity: 1;
      filter: blur(0px);
    }
    65% {
      width: 50px;
      height: 50px;
      opacity: 0.5;
      filter: blur(2px);
    }
    75% {
      width: 60px;
      height: 60px;
      opacity: 1;
      filter: blur(0px);
    }
    100% {
      width: 0px;
      height: 0px;
      opacity: 0;
      filter: blur(2px);
    }
  }
</style>

跟昨天同樣的範例，但寫法不太一樣，它是直接加入<transition>標籤內，並可以自已為 class name 命名。

JavaScript鉤子

<transition>還可綁定JavaScript Hooks，除了單獨使用，也能結合 CSS transitions 和 animations 一起使用！以下為JavaScript鉤子：

• beforeEnter(el) 在「進入漸變或動畫」前生效。
• enter(el, callback) 在「進入漸變或動畫」的元件插入時生效。
• afterEnter(el) 在「進入漸變或動畫」結束時生效。
• enterCancelled(el) 在「未完成漸變或動畫」時取消。
• beforeLeave(el) 在「離開漸變或動畫」前生效。
• leave(el, callback) 在觸發「離開漸變或動畫」時生效。
• afterLeave(el) 在「離開漸變或動畫」結束時生效。
• leaveCancelled(el) 在「未完成漸變或動畫」時取消，只能用在v-show。

接著就來個範例吧：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled">
  <div v-if="change" class="ant_man_style"></div>
</transition>

(以上為簡寫，原寫法為v-on:before-enter="beforeEnter")
另外，要特別注意的是，如果只使用JavaScript鉤子，在enter和leave中必須使用done。不然它們會同時生效喔，動畫也因此順間完成！！！

今天就先到這了~