<div id="app">
  <!-- 
  mode="in-out" 先进入在隐藏
  mode="out-in" 先隐藏在进入 
  -->
  <transition mode="out-in">
    <!-- 不使用key的话节点直接复用了,不存在动画效果了,使用 key 解决复用dom的情况,动画恢复 -->
    <div v-if="show" key="hello">{{mess1}}</div>
    <div v-else key="bye">{{mess2}}</div>
  </transition>
  <button @click="handleClick">toggle</button>
</div>
.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
var app = new Vue({
  el: "#app",
  data: {
    mess1: "Hello World",
    mess2: "Bye 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