vue3 transition 隐藏过渡，折叠过渡效果实现

隐藏过渡

可以直接使用官方给出的例子

// 隐藏过渡效果
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

折叠面板效果过渡

折叠需要考虑很多方面的问题，

• 例如子元素是否有 padding 或者 margin， 如果有将会造成抖动或者闪烁，需自行排除。
• 如果带有 v-show v-if 的元素没有高度，则不能使用，所以必须动态添加高度样式， 在点击的时候添加，防止某些异步组件高度计算错误！

<button @click="()=>{
	// 动态添加高度，只设置一次
	if(cardBody.style.height)cardBody.style.height = cardBody.offsetHeight + 'px';
	// 控制元素显示
	collapse  = !collapse 
}"></button>

<transition name="collapse">
	<template v-if="xxx">
		hello world
	</template>
</transition>

<script setup lang="ts">
import xxx
const cardBody = ref<any>(null);
const collapse = ref<boolean>(false)
</script>

<style>
// 折叠加隐藏过渡效果
.collapse-enter-active,
.collapse-leave-active {
    transition: all 0.5s;
    // 防止折叠时元素溢出
    overflow: hidden;
}

.collapse-enter-from,
.collapse-leave-to {
    height: 0px !important;
    opacity: 0;
}
</style>