JSFiddle - React, Tailwind, and code Playground

by miloer

HTML

<script src="https://cdn.bootcss.com/vue/1.0.17/vue.js"></script>
<div id="app">
 <span v-show="show" transition="bounce">Look at me!</span>
 <button v-on:click="show=!show">toggle</button>
</div>

CSS

.bounce-transition {
  display: inline-block; /* 否则 scale 动画不起作用 */
}
.bounce-enter {
  animation: bounce-in .5s;
}
.bounce-leave {
  animation: bounce-out .5s;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}

JavaScript

new Vue({
 el:"#app",
 data:{
 msg:'jn',
 show:'true'
 }
})