css - Vue2 : v-move not applied to "leave" transition

Question

目标 —

流畅地为不断变化的元素列表制作动画。

问题 —

当一个元素进入列表时，一切都会顺利地重新定位。当一个元素离开列表时，一切都会突然消失。

我发现 .drawer-move 在新元素进入时应用，但 .drawer-move 不是 在元素离开时应用。

文档:https://v2.vuejs.org/v2/guide/transitions.html#List-Move-Transitions

模板 —

<transition-group class="utilities -animate" tag="section" name="drawer">
  <div class="drawer" key="application-drawer">
    <div class="heading">Select An Application</div>
  </div>

  <div class="drawer" v-if="selectCompanyVisible" key="company-drawer">
    <div class="heading">Select A Company</div>
  </div>

  <div class="drawer" key="manage-drawer">
    <div class="heading">Manage {{ user.id }}</div>
  </div>
</transition-group>

CSS —

.drawer-enter-active,
.drawer-leave-active,
.drawer-move {
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  transition-duration: .4s;
}

.drawer-enter,
.drawer-leave-to {
  opacity: 0;
  transform: translateX(3rem);
}

Answer 1

-leave-active 转换类必须应用 position: absolute 声明，以便将其从布局流中取出，以便 sibling 可以移动到它周围。

https://forum.vuejs.org/t/transition-group-move-class-not-occuring-in-the-array/6381/4

这也可能意味着您应该在 transition-group 元素中声明定位。 Vue 团队中没有人提到这一点，但我没有发现过渡类会自动应用这一点。

.drawer-leave-active {
  position: absolute;

  // optional, depends on your layout
  left: 0;
  width: 100%;
}

.utilities {
  position: relative; 
}