ElementUI自定义组件之左右折叠展开动画

背景

        我们都知道,element ui官网提供了一个上下折叠展开动画,在实现可伸缩的查询面板等业务中非常实用。美中不足的是,不支持配置左右过渡动画。而实际开发中,左右过渡动画的场景还比较多,比如左树右表(左树可收缩)等。在此,笔者参考el-collapse-transition实现,做了个简单的左右过渡动画组件。

ElementUI自定义组件之左右折叠展开动画

演示效果 ElementUI自定义组件之左右折叠展开动画

核心代码 

beforeEnter(el) {
  addClass(el, 'drawer-transition')
  if (!el.dataset) el.dataset = {}

  el.dataset.oldPaddingLeft = el.style.paddingLeft
  el.dataset.oldPaddingRight = el.style.paddingRight

  el.style.width = '0'
  el.style.paddingLeft = 0
  el.style.paddingRight = 0
},
enter(el) {
  el.dataset.oldOverflow = el.style.overflow
  if (el.scrollWidth !== 0) {
    el.style.width = el.scrollWidth + 'px'
    el.style.paddingLeft = el.dataset.oldPaddingLeft
    el.style.paddingRight = el.dataset.oldPaddingRight
  } else {
    el.style.width = ''
    el.style.paddingLeft = el.dataset.oldPaddingLeft
    el.style.paddingRight = el.dataset.oldPaddingRight
  }
  el.style.overflow = 'hidden'
},
afterEnter(el) {
  removeClass(el, 'drawer-transition')
  el.style.width = ''
  el.style.overflow = el.dataset.oldOverflow
},
beforeLeave(el) {
  if (!el.dataset) el.dataset = {}
  el.dataset.oldPaddingLeft = el.style.paddingLeft
  el.dataset.oldPaddingRight = el.style.paddingRight
  el.dataset.oldOverflow = el.style.overflow

  el.style.width = el.scrollWidth + 'px'
  el.style.overflow = 'hidden'
},
leave(el) {
  if (el.scrollWidth !== 0) {
    addClass(el, 'drawer-transition')
    el.style.width = 0
    el.style.paddingLeft = 0
    el.style.paddingRight = 0
  }
},
afterLeave(el) {
  removeClass(el, 'drawer-transition')
  el.style.width = ''
  el.style.overflow = el.dataset.oldOverflow
  el.style.paddingLeft = el.dataset.oldPaddingLeft
  el.style.paddingRight = el.dataset.oldPaddingRight
}

PS:有需要的朋友可以考虑下载组件+样例完整代码,附上链接:

ElementUI自定义组件之左右折叠展开动画组件 + 组件样例 代码-Vue代码类资源-CSDN下载

上一篇:VUE配置Axios和 element ui


下一篇:elementUI中message的用法