<div id="app">
  <fade :show="show">
    <div>{{mess}}</div>
  </fade>
  <fade :show="show">
    <h1>{{mess}}</h1>
  </fade>
  <button @click="handleClick">toggle</button>
</div>
// 完整的动画全部封装在组件中
Vue.component("fade", {
  props: ["show"],
  template: `
       <transition @before-enter="handleBeforeEnter"
                   @enter="handleEnter"
       >
         <slot v-if="show"></slot>
       </transition>
       `,
  methods: {
    handleBeforeEnter: function (el) {
      el.style.color = "red";
    },
    handleEnter: function (el, down) {
      setTimeout(() => {
        el.style.color = "blue";
        down();
      }, 1000);
    }
  }
});
var app = new Vue({
  el: "#app",
  data: {
    mess: "hello world",
    show: true
  },
  methods: {
    handleClick: function () {
      this.show = !this.show;
    }
  }
});

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