基于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>