基于vue渐变展开收起盒子动画（盒子高度不定）

基于vue展开收起盒子动画（盒子高度不定）

问题： transition动画只能对高度给定的盒子，在高度变化时实现展开收起动画。对于不定高度的盒子，transition无能为力
解决方案： 小白入门，查找了大量资料后找到一篇大佬写的文章。大佬参考element-ui通过overflow获取高度的方法创建了一个函数式组件实现了对于不定高度的盒子展开收起动画的效果：

const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'
const Transition = {
  'before-enter' (el) {
    el.style.transition = elTransition
    if (!el.dataset) el.dataset = {}

    el.dataset.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom

    el.style.height = 0
    el.style.paddingTop = 0
    el.style.paddingBottom = 0
  },

  'enter' (el) {
    el.dataset.oldOverflow = el.style.overflow
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight + 'px'
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    } else {
      el.style.height = ''
      el.style.paddingTop = el.dataset.oldPaddingTop
      el.style.paddingBottom = el.dataset.oldPaddingBottom
    }

    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.oldPaddingTop = el.style.paddingTop
    el.dataset.oldPaddingBottom = el.style.paddingBottom
    el.dataset.oldOverflow = el.style.overflow

    el.style.height = el.scrollHeight + 'px'
    el.style.overflow = 'hidden'
  },

  'leave' (el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = elTransition
      el.style.height = 0
      el.style.paddingTop = 0
      el.style.paddingBottom = 0
    }
  },

  'after-leave' (el) {
    el.style.transition = ''
    el.style.height = ''
    el.style.overflow = el.dataset.oldOverflow
    el.style.paddingTop = el.dataset.oldPaddingTop
    el.style.paddingBottom = el.dataset.oldPaddingBottom
  }
}

export default {
  name: 'collapseTransition',
  functional: true,
  render (h, { children }) {
    const data = {
      on: Transition
    }
    return h('transition', data, children)
  }
}

然后在需要的地方当作组件使用

使用教程

随便建个js文件(名字随便取，组件名也随便取)，把大佬的代码复制到js文件里面，然后在需要的界面把这个js文件当作组件引入,然后在components里面声明

import collapseTransition from './collapseTransition/collapseTransition.js'

export default {
		name: "",
		data() {
			return {
				isShow: false
			};
		},
		components: {
			collapseTransition
		},
		computed: {},
		mounted() {}
	}

然后只需要把这个当成组件使用,使用v-show来判断是否展开

<collapse-transition>
	<view class="" v-show="isShow">
		<view class="">

		</view>
	</view>
</collapse-transition>

转载：大佬实现https://segmentfault.com/q/1010000011359250