JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app"> 
  <transition name="fade">
    <div v-if="switc">
      <div style="background-color: pink; height: 100px"></div>
   </div>
   </transition>
   <button type="button" class="btn btn-secondary" @click="switc = !switc">
     <span>Switch</span>
   </button>
</div>

CSS

.fade-enter-active {
  animation: bounce-in .5s;
}
.fade-leave-active {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% {
    height: 5px;
  }
  30% {
    height: 30px;
  }
  50% {
    height: 50px;
  }
  100% {
    height: 100px;
  }
}
@keyframes bounce-out {
  0% {
    height: 90px;
    }
  50% {
    height: 50px;
  }
  100% {
    height: 0px;
  }
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {    
      switc: false
  }
})