JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script>
<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

CSS

body {
  font-family: Verdana;
  margin: 20px;
}

#example-2 p {
  background: white;
  border-radius: 5px;
  padding: 20px;
}

.bounce-enter-active {
  animation: bounce-in .6s;
}

.bounce-leave-active {
  /* animation: bounce-in .8s reverse; */
}

@keyframes bounce-in {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}

JavaScript

new Vue({
  el: '#example-2',
  data: {
    show: true
  },
})