Vue3 内容展开收起动画过渡效果_vue3收缩展开动画插件

内容css

  overflow: hidden;
  transition: height 0.3s;
  height: 0;
1
2
3

计算内容高度

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);
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

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