<div id="app">
  <transition name="fade">
    <div v-show="show">v-show</div>
  </transition>
  <button @click="handleBtnClick">Toggle</button>
</div>
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.fade-leave-active {
  transform-origin: left center;
  animation: bounce-in 1s reverse;
}

.fade-enter-active {
  transform-origin: left center;
  animation: bounce-in 1s;
}
var app = new Vue({
  el: "#app",
  data: {
    show: true
  },
  methods: {
    handleBtnClick: function () {
      this.show = !this.show;
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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