Vue实现侧边栏过渡时主容器推送效果及过渡事件监听方法

想要让主容器和侧边栏实现联动的推送过渡效果，你可以借助Vue <transition>组件提供的内置过渡钩子事件，在侧边栏过渡的不同阶段同步控制主容器的样式变化。下面是一步步的实现方法：

1. 为侧边栏过渡组件绑定钩子事件 #

首先，在你的<transition>标签上添加过渡阶段的钩子事件，比如@enter（侧边栏开始进入时触发）、@after-leave（侧边栏完全离开后触发）。这些事件会帮我们精准同步主容器的状态。

修改后的模板代码：

<template>
  <div id="app">
    <sidebar-item/>
    <transition 
      name="fade-kiosk-list"
      @enter="onSidebarEnter"
      @after-leave="onSidebarAfterLeave"
    >
      <kiosk-list v-if="isOpen"/>
    </transition>
    <!-- 用类名控制主容器的推送状态 -->
    <main class="container" :class="{ 'container-pushed': isContainerPushed }">
      <router-view/>
    </main>
  </div>
</template>

2. 在Vue实例中实现钩子处理逻辑 #

添加一个响应式变量来标记主容器的推送状态，然后在钩子方法中切换这个状态：

<script>
export default {
  data() {
    return {
      isOpen: false,
      isContainerPushed: false // 控制主容器是否处于推送状态
    };
  },
  methods: {
    onSidebarEnter(el, done) {
      // 侧边栏开始滑入时，让主容器同步推送
      this.isContainerPushed = true;
      // 调用done()告知Vue过渡已完成（如果使用JS驱动的过渡则必须调用）
      done();
    },
    onSidebarAfterLeave(el) {
      // 侧边栏完全滑出后，让主容器恢复原位
      this.isContainerPushed = false;
    }
  }
};
</script>

3. 为主容器添加推送过渡的CSS样式 #

确保主容器的过渡时长和侧边栏保持一致（这里是0.3s），实现平滑的联动效果。注意替换下面的250px为你实际的侧边栏宽度：

/* 保留你原有的侧边栏过渡样式 */
.fade-kiosk-list-enter-active, .fade-kiosk-list-leave-active {
  transition: all 0.3s ease-in-out;
}
.fade-kiosk-list-enter {
  transform: translateX(-100%);
}
.fade-kiosk-list-enter-to {
  transform: translateX(0);
}
.fade-kiosk-list-leave-to {
  transform: translateX(-100%);
}

/* 主容器的基础样式与过渡 */
.container {
  transition: transform 0.3s ease-in-out; /* 和侧边栏同步过渡时长 */
  /* 正常状态下的布局（根据你的侧边栏位置调整） */
  width: calc(100% - 250px);
  margin-left: 250px;
}

/* 推送状态下的主容器样式 */
.container-pushed {
  transform: translateX(250px); /* 和侧边栏宽度一致，实现推送效果 */
}

额外优化提示 #

• 如果需要更精准的同步，可以使用@leave钩子（侧边栏开始离开时触发）来提前触发主容器的回移动画，让两者的过渡完全对齐。
• 如果你不想用类名，也可以直接通过内联样式绑定style来控制transform，但类名的方式更易于维护和扩展。
• 如果侧边栏是动态宽度，可以把宽度值存在响应式变量中，动态计算主容器的样式。

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