Vue2: v-move не применяется для перехода "оставить" - PullRequest
0 голосов
/ 09 ноября 2018

Гол -

Плавно анимировать изменяющийся список предметов.

Проблема -

Когда элемент входит в список, все перемещается плавно. Когда элемент покидает список, все резко падает.

Я обнаружил, что .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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...