首先创建src下创建utils文件夹,创建transition.js文件封装过渡组件
const transitionStyle = '0.3s 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.overflow = 'hidden'
},
// 进入结束
afterEnter (el) {
// 清除过度样式
el.style.transition = ''
el.style.height = ''
},
// 离开前
beforeLeave (el) {
el.style.height = `${el.scrollHeight}px`
el.style.overflow = 'hidden'
},
// 离开中
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', { on: Transition}, children)
}
}
过渡组件使用,直接在需要使用的组件引入注册
<template>
<div>
<p @click="show=!show">切换</p>
<my-transition>
<ul class='box' v-if="show">
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>ccccccc</li>
<li>ddddddd</li>
<li>eeeeeee</li>
</ul>
</my-transition>
</div>
</template>
<script>
// 自定义过度组件
import myTransition from "../utils/transition.js";
export default {
data() {
return {
show:false
}
},
components: {
"my-transition": myTransition,
},
}
</script>
<style lang="less" scoped>
.box{
background: rgb(248, 248, 248);
position: absolute;
box-sizing: border-box;
top: 50px;
left: 40%;
}
</style>
自定义过渡组件包裹需要过渡高度的元素即可