JSFiddle - React, Tailwind, and code Playground

by Atinux

HTML

<script src="//cdn.bootcss.com/vue/1.0.11/vue.js"></script>
<div id="demo">
  <div v-if="show" transition="expand">hello</div>
  <button @click="toggle()">Toggle</button>
</div>

CSS

/* always present */

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


/* .expand-enter defines the starting state for entering */


/* .expand-leave defines the ending state for leaving */

.expand-enter {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

.expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

JavaScript

new Vue({
  el: '#demo',
  data: {
    show: true,
    transitionState: 'Idle'
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
})