vue-展示与隐藏的过渡动画

在网上找了一个封装过渡动画的js，做到显示与隐藏高度随着动画变化，其中遇到几个问题，将封装文件进行了修改
用法：在util创建js文件将代码放进去，在需要用的页面引入并创建组件

const transitionStyle = '0.2s height ease-in-out'
const Transition = {
  // 进入前 设置el元素的transition,高度0
  beforeEnter (el) {
    el.style.transition = transitionStyle
    el.style.height = 0
  },
  // 进入中
  enter (el) {
    // 获取元素显示的高度
    if (el.scrollHeight !== 0) {
      el.style.height = `${el.scrollHeight}px`
    } else {
      // 没有高度就不显示
      el.style.height = ''
    }
    el.style.contain = 'paint'
  },
  // 进入结束
  afterEnter (el) {
    // 清除过度样式
    el.style.transition = ''
    el.style.height = ''
  },

  // 离开前
  beforeLeave (el) {
    el.style.height = `${el.scrollHeight}px`
    el.style.contain = 'paint'
  },
  // 离开中
  leave (el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = transitionStyle
      el.style.height = 0
    }
  },
  // 离开结束
  afterLeave (el) {
    el.style.transition = ''
    el.style.height = ''
  }
}
export default {
  functional: true, // 指定函数组件
  render (h, { children }) {
    return h('transition-group', { on: Transition }, children)
  }
}

修改一：
因为我用了position: sticky;粘性布局，粘性布局是不允许父元素overflow = 'hidden’的，所以将el.style.overflow = 'hidden’用el.style.contain = 'paint’来代替
修改二：
同一个页面可能会用到多次这个组件，所以将return h(‘transition’, { on: Transition }, children)改为return h(‘transition-group’, { on: Transition }, children)