vue.js - 如何一次同时过渡两个元素？

Question

我正在尝试创建一个可以通过单击触发元素滑入和滑出的侧边栏。触发元素应该贴在侧边栏上。但是，在我当前的 fiddle 中，触发器元素仅在侧边栏完成其过渡后才改变位置。

我怎样才能完成预期的行为？

new Vue({
  el: "#app",
  data: {
    exposed: true
  }
})

.sidebar {
  width: 200px;
  height: 200px;
}

.toggler {
  height: 30px;
}

/**********************
 * Transition classes *
 **********************/
.slide-leave-active,
.slide-enter-active {
  transition: 1s;
}
.slide-enter {
  transform: translate(-200px, 0);
}
.slide-leave-to {
  transform: translate(-200px, 0);
}

<script src="https://vuejs.org/js/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div id="app" class="px-0 py-4">
  <div class="d-flex">
  
    <!-- Sidebar content -->
    <transition name="slide">
      <div v-if="exposed" class="sidebar bg-dark text-white p-1">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>
    </transition>
    
    <!-- Sidebar toggler -->
    <div class="toggler px-2 bg-secondary">
      <a href="#" v-on:click="exposed = !exposed" class="text-white">
        <span v-if="exposed">[X]</span>
        <span v-else>(?)</span>
      </a>
    </div>
    
  </div>
</div>

jsfiddle

Answer 1

我对 css 进行了如下小改动

.slide-enter {
  margin-left:-200px;
}

.slide-enter-to {
  margin-left:0px;
}

.slide-leave-to {
  margin-left:-200px;
}

请检查它是否有效。 https://jsfiddle.net/z43xug9n/3/