Гол -
Плавно анимировать изменяющийся список предметов.
Проблема -
Когда элемент входит в список, все перемещается плавно. Когда элемент покидает список, все резко падает.
Я обнаружил, что .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);
}