<div id="app">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <div class="boxs">
    <transition
      type="transition"
      name="fade"
      enter-active-class="animated swing fade-enter-active"
      leave-active-class="animated bounce fade-leave-active"
    >
      <div class="box" v-if="show"></div>
    </transition>
    <transition
      name="fade"
      type="animation"
      enter-active-class="animated swing fade-enter-active"
      leave-active-class="animated bounce fade-leave-active"
    >
      <div class="box" v-if="show"></div>
    </transition>
  </div>
</div>

button {
  margin-bottom: 10px;
}

.boxs {
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #B51A2A;
  margin-right: 10px;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 3s;
}

const vm = new Vue({
  el: '#app',
  data: {
    show: true,
  },
});