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;
    }