<div id="app">
  <transition @before-enter="handleBeforeClick" @enter="handlEnterClick" @after-enter="handlAfterClick">
    <div v-show="show">
      {{mess}}
    </div>
  </transition>
  <button @click="handleBtnClick">toggle</button>
</div>
var app = new Vue({
  el: "#app",
  data: {
    mess: "hello world",
    show: true
  },
  methods: {
    handleBtnClick: function () {
      this.show = !this.show;
    },
    // 显示/入场 的时候执行,一个参数
    handleBeforeClick: function (el) {
      el.style.color = "red";
      console.log("handleBeforeClick", el);
    },
    // 显示/入场 的时候执行,两个参数el,done(回调函数)
    handlEnterClick: function (el, done) {
      setTimeout(() => {
        el.style.color = "blue";
        // 要调用一下done回调函数,证明动画已经结束了
      }, 1000);
      setTimeout(() => {
        done();
      }, 3000);
      console.log("handlEnterClick", el, done);
    },
    handlAfterClick: function (el) {
      el.style.color = "pink";
    }
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js