Vue.js按钮切换上下移动动画实现求助

云上老周

2026-8-19

解决方案

问题根源

使用<transition mode="out-in">会导致元素先后执行过渡（先完成离开动画，再执行进入动画），无法实现两个按钮同步移动的效果；
CSS选择器button-leave-to缺少开头的点号（应为.button-leave-to），导致离开动画样式不生效；
混用position: relative的top属性和transform: translateY，动画逻辑冲突，且top会触发页面重排，性能不如transform。

修复后的代码

Vue模板部分

<transition-group name="button">
  <div 
    class="accordion-item" 
    key="user-button"
    v-show="isActive"
  >
    <h2 class="accordion-header">
      <button class="d-flex bg-white mx-auto">
        <a @click="isActive = !isActive">User</a>
      </button>
    </h2>
  </div>
  <div 
    class="accordion-item" 
    key="view-button"
    v-show="!isActive"
  >
    <h2 class="accordion-header">
      <button class="d-flex bg-white mx-auto">
        <a @click="isActive = !isActive">View</a>
      </button>
    </h2>
  </div>
</transition-group>

CSS样式部分

.accordion-item {
  position: absolute;
  width: 100%;
}

.button-leave-active,
.button-enter-active {
  transition: transform 0.8s ease;
}

/* User按钮点击后向下离开 */
.button-leave-from {
  transform: translateY(0);
}
.button-leave-to {
  transform: translateY(60px);
}

/* View按钮同时向上进入 */
.button-enter-from {
  transform: translateY(-60px);
}
.button-enter-to {
  transform: translateY(0);
}