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

weixin_33725515

于 2016-06-24 14:19:33 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000005795058

本文介绍了一个使用Vue.js实现的简单示例，展示了如何通过添加CSS样式及过渡钩子函数实现元素的显示隐藏动画效果。代码中包括了HTML结构、CSS样式定义及Vue实例配置。

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'
      }
    }
  }
})