Vue3 内容展开收起动画过渡效果

内容css

  overflow: hidden;
  transition: height 0.3s;
  height: 0;

计算内容高度

const collapseHeight = ref<number[]>([]); // 内容高度
const contentRef = ref(); // 内容ref实例对象
watchEffect(
  () => {
    const len = sectionList.value.length;
    if (len) {
      getCollapseHeight(len); // 获取各个面板内容高度
    }
  },
  { flush: 'post' }
);
const getCollapseHeight = (len: number) => {
  for (let n = 0; n < len; n++) {
    collapseHeight.value.push(contentRef.value[n].offsetHeight);
  }
};

内容dom（item.expand 展开用内容高度，收起变为0）

   <div
        class="内容css"
        :style="`height: ${item.expand ? collapseHeight[index] : 0}px;}`"
   >

参考链接
Vue3折叠面板（Collapse）