Vuetify v-expand-transition平滑展开时如何正确添加上下边距间距

架构老林

2026-10-1

解决方案

v-expand-transition的过渡动画基于元素`offsetHeight`的动态计算，上下边距/内边距如果未被正确纳入高度计算范围就会导致动画卡顿，以下是3种可落地的实现方案：

方案1：内层嵌套容器承载间距（推荐）

直接把需要的上下间距加在过渡直接子元素的内层容器上，过渡直接子元素保持无上下边距，高度计算完全包含内层边距，不会出现异常。
修改后的代码如下：

<v-card class="mb-5">
  <v-card-title class="justify-space-between pb-0">
    <slot name="tableTitle"></slot>
    <v-btn icon @click="toggleBtn = !toggleBtn"><v-icon>mdi-eye</v-icon></v-btn>
  </v-card-title>

  <v-expand-transition>
    <v-card-text v-show="toggleBtn" class="py-0"> <!-- 直接子元素清除上下内边距 -->
      <!-- 内层容器承载所有需要的间距 -->
      <div class="pt-4 pb-4"> 
        <v-simple-table fixed-header height="300px">
          <template v-slot:default>
            <tbody>
              <tr v-for="item in tasks" :key="item.name">
                <td class="font-weight-medium" style="width: 70%">{{ item.name }}</td>
                <td class="text-orange">{{ item.due }}</td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
      </div>
    </v-card-text>
  </v-expand-transition>
</v-card>

方案2：透明边框替代上下边距

无需额外嵌套，将需要的上下间距转换为同背景色的边框，边框会被纳入offsetHeight计算，不会影响过渡效果：

/* 给过渡的直接子元素添加该类即可 */
.spacing-with-border {
  border-top: 16px solid #fff; /* 16px对应你需要的上边距，颜色和父容器背景一致 */
  border-bottom: 16px solid #fff; /* 16px对应你需要的下边距 */
}