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

版权声明

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