动态展现div块的transition效果包装组件

动态展现效果

功能说明： 动态展现div块的transition效果包装组件

组件代码

const elTransition = '0.4s all ease'
const Transition = innerMargin => ({
  'before-enter'(el) {
    el.style.transition = elTransition
    if (!el.dataset) {
      el.dataset = {}
    }
    el.style.height = 0
  },
  enter(el) {
    el.dataset.oldOverflow = el.style.overflow
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight + innerMargin + 'px'
    } else {
      el.style.height = ''
    }
    el.style.overflow = 'hidden'
  },
  'after-enter'(el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
  },
  'before-leave'(el) {
    if (!el.dataset) {
      el.dataset = {}
    }
    el.dataset.oldOverflow = el.style.overflow
    el.style.height = el.scrollHeight - innerMargin + 'px'
    el.style.overflow = 'hidden'
  },
  leave(el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = elTransition
      el.style.height = 0
    }
  },
  'after-leave'(el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
  }
})
export default {
  name: 'VerticalToggle',
  functional: true,
  props: {
    innerMargin: {
      type: Number,
      default: 0
    }
  },
  render(h, { props, children }) {
    const data = {
      on: Transition(props.innerMargin)
    }
    return h('transition', data, children)
  }
}
</script>

复制代码

调用

<template>
 <VerticalToggle :innerMargin="24">
 ...
 </VerticalToggle>
<script>
</template>
import VerticalToggle from './VerticalToggle'

export default {
  components: { VerticalToggle },
  ...
复制代码