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

user_605473 0
Viewed 462

Goal —

Smoothly animate a changing list of items.

Problem —

When an item enters the list, everything repositions smoothly. When an item leaves the list, everything snaps abruptly.

I've discovered that .drawer-move is applied when new items enter, but .drawer-move is not applied when items leave.

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

Template —

<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);
}
vuejs2 css
1 Answers

The -leave-active transition class must apply a position: absolute declaration, in order to take it out of the layout flow, so the siblings can move in to place around it.

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

This also could mean that you should declare positioning within the transition-group element. No one mentions this in the Vue team, but I don't find this applied automatically by the transition classes.

.drawer-leave-active {
  position: absolute;

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

.utilities {
  position: relative; 
}
user_68051430
Related