JSFiddle - React, Tailwind, and code Playground

by miloer

HTML

<script src="https://cdn.bootcss.com/vue/1.0.17/vue.js"></script>
<div id="example">
<div v-if="show" transition="expand">hello</div>
<button v-on:click="show=!show">toggle</button>
</div>

CSS

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

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

JavaScript

//在这里面写Vue.js代码
 Vue.transition('expand', {
  beforeEnter: function (el) {
    el.textContent = 'beforeEnter'
  },
  enter: function (el) {
    el.textContent = 'enter'
  },
  afterEnter: function (el) {
    el.textContent = 'afterEnter'
  },
  enterCancelled: function (el) {
    // handle cancellation
  },
  beforeLeave: function (el) {
    el.textContent = 'beforeLeave'
  },
  leave: function (el) {
    el.textContent = 'leave'
  },
  afterLeave: function (el) {
    el.textContent = 'afterLeave'
  },
  leaveCancelled: function (el) {

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