JSFiddle - React, Tailwind, and code Playground

by kakuei_tanaka

HTML

<div id="app">
  <div class="msg" v-if="show" v-transition="expand">
  hello!
  </div>
  <button v-on="click: show = !show">Toggle</button>
</div>

CSS

.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    show: false
  }
});