vue3折叠面板（手风琴）展开与收起过渡效果

背景

一开始做这个过渡效果的时候，会想到通过控制元素高度来实现假如元素高度为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;
      }
    };