Question

目标-

平滑地为不断变化的项目列表添加动画。

问题-

当某项进入列表时，所有内容都会重新定位。当某项离开列表时，所有内容都会突然断裂。

我发现在输入新项目时会应用.drawer-move ，但是在项目离开时不会应用.drawer-move 。

文档：https://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过渡类必须应用variations = [e for x in range(1,5) for e in (itertools.combinations(string,x)) ]声明，才能将其从布局流程中移出，以便兄弟姐妹可以将其移入到其周围。

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

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

position: absolute

Vue2：v-move不适用于“离开”过渡

1 个答案: