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

Question

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

Answer 1

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;
}