vue js过渡侧边栏推送内容

Question

我有一个侧边栏和主要内容容器。

<template>
  <div id="app">
    <sidebar-item/>
    <transition name="fade-kiosk-list">
      <kiosk-list v-if="isOpen"/>
    </transition>
    <main class="container">
      <router-view/>
    </main>
  </div>
</template>

这是我的过渡风格：

.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%);
}

侧边栏效果很好，但我还想为主容器添加过渡，就像'推'效果一样。 我如何“倾听”侧边栏的过渡事件？

感谢。