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">
   <div v-if="show" transition="expand">hello</div>
   <button v-on:click="show=!show">toggle</button>
</div>

CSS

/* 必需 */
.expand-transition {
  transition: all 1s ease;
  height: 30px;
  padding: 5px;
  background-color:#ccc;
  overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

JavaScript

var vm = new Vue({
	el:"#app",
  data:{
    show:true
  }
})