vue.js过渡(vue学习记录2)

html代码：
<div id="demo">

      <div v-if="show" transition="expand" expand="100">hello</div>
      <button @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;
        }

同时提供钩子：

    new Vue({
  el: '#demo',
  data: {
    show: true
  },
  transitions: {
    expand: {
      beforeEnter: function (el) {
        el.textContent = 'beforeEnter'
      },
      enter: function (el) {
        el.textContent = 'enter'
      },
      afterEnter: function (el) {
        el.textContent = 'afterEnter'
      },
      beforeLeave: function (el) {
        el.textContent = 'beforeLeave'
      },
      leave: function (el) {
        el.textContent = 'leave'
      },
      afterLeave: function (el) {
        el.textContent = 'afterLeave'
      }
    }
  }
})