Vue學習筆記【20】——Vue中的動畫（使用動畫鈎子函數）

定義及使用鈎子函數

1. 定義 transition 組件以及三個鈎子函數：

 <div id="app">
    <input type="button" value="切換動畫" @click="isshow = !isshow">
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>
  </div>

2. 定義三個 methods 鈎子方法：

 methods: {
        beforeEnter(el) { // 動畫進入之前的回調
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 動畫進入完成時候的回調
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 動畫進入完成之后的回調
          this.isshow = !this.isshow;
        }
      }

3. 定義動畫過渡時長和樣式：

 .show{
      transition: all 0.4s ease;
    }