背景
一开始做这个过渡效果的时候,会想到通过控制元素高度来实现假如元素高度为0,点击面板时高度设置为auto;但是试过以后发现无效;因为transition属性只针对数值类的值生效,auto并不是数值类。
实现
// baseWrappRef dom元素
const baseWrappRef = ref(null);
const isOpen = ref(false);
const handleClick = () => {
isOpen.value = !isOpen.value;
if (isOpen.value) {
//先将元素高度设置为auto,拿到展开后的实时高度
baseWrappRef.value.style.height = "auto";
const { height } = baseWrappRef.value.getBoundingClientRect();
baseWrappRef.value.style.height = 0;//设置高度为0
baseWrappRef.value.style.transition = "all .3s ease";//设置过渡效果
baseWrappRef.value.getBoundingClientRect();
baseWrappRef.value.style.height = height + "px";//设置实际高度
}else{
baseWrappRef.value.style.height = 0;
}
};