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

html代码:

      hello
      Toggle

必须要添加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'
      }
    }
  }
})

关键字:JavaScript, function, vue, height

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部