如何解决Vue手风琴元素从页面顶部过渡，改为从所属行位触发过渡效果

问题根因 #

• 未定义fade过渡名对应的动画类，默认过渡触发元素位置重计算时，<table>结构里嵌套了非table标准子元素（你把transition-group设为tag="v-layout"直接放在table下，不符合table的DOM结构规范，浏览器会自动纠错把这个容器移到table外，导致子元素初始位置计算错误，就会出现从页面顶部飞入的问题）
• 过渡子元素没有设置transform-origin: top，动画变换原点错误
• 给tbody单独加的transition未和Vue过渡生命周期配合，导致动画逻辑冲突

修复方案 #

第一步：修正DOM结构，把过渡容器放到符合table规范的位置 #

移除table下的transition-group嵌套，给每个手风琴项单独加过渡，同时父元素加相对定位限制子元素位置计算范围：

<li class="accordion-parent" v-for="(parent, pIndex) in list" :key="pIndex">
  <div class="accordion-entry">
    <div
      @click="() => toggleExpand(pIndex)"
      :class="[{ expanded: expanded === pIndex }, outerDiv]"
    >
      <!-- 单独给内容区加过渡，不要嵌套在table内部 -->
      <transition name="slide-down">
        <div class="accordion-content" v-show="expanded === pIndex">
          <table class="accordion-expanded">
            <tbody
              v-for="index in 10"
              :key="index"
              class="cycle"
            >
              <tr class="view-more-row">
                <td />
                <td class="view-more-cell">
                  <span> View more cycles </span>
                </td>
              </tr>
            </tbody>
            <tbody key="id">
              <tr class="view-more-row">
                <td />
                <td class="view-more-cell">
                  <span> View more cycles </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </transition>
   </div>
  </div>
</li>

第二步：补全脚本逻辑 #

<script>
export default {
  name: "AnalyticsAccordion",
  data() { 
    return { 
      list: [1,2,3,4],
      // 补全展开控制变量
      expanded: null
    }
  },
  methods: {
    toggleExpand(index) {
      this.expanded = this.expanded === index ? null : index
    }
  }
};
</script>

第三步：补全过渡CSS，设置正确的变换原点 #

<style>
.accordion-parent {
  /* 父元素加相对定位，限制子元素动画的位置计算范围 */
  position: relative;
}
/* 定义下拉过渡动画 */
.slide-down-enter-from,
.slide-down-leave-to {
  opacity: 0;
  /* 从自身顶部开始变换，不会出现位置偏移 */
  transform: translateY(-8px) scaleY(0.95);
  transform-origin: top;
}
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.5s ease;
  transform-origin: top;
}
.manual-v-layout {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
</style>

内容的提问来源于stack exchange，提问作者Marko Marinkovic