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

背景

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

演示效果 

核心代码 

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下载