TransitionGroup ​

<TransitionGroup> jest wbudowanym komponentem zaprojektowanym do animowania wstawiania, usuwania oraz zmiany kolejności elementów lub komponentów renderowanych w liście.

Różnice w porównaniu z <Transition> ​

<TransitionGroup> obsługuje te same właściwości, klasy przejść CSS i nasłuchiwacze zdarzeń JavaScript co <Transition>, z następującymi różnicami:

• Domyślnie nie renderuje elementu opakowującego. Możesz jednak określić element do wyrenderowania za pomocą właściwości tag.

• Tryby przejścia nie są dostępne, ponieważ nie przełączamy się już między wzajemnie wykluczającymi się elementami.

• Elementy wewnętrzne zawsze muszą posiadać unikalny atrybut key.

• Klasy przejść CSS będą stosowane do poszczególnych elementów na liście, a nie do grupy/kontenera.

Przejścia wejścia / wyjścia ​

Oto przykład zastosowania przejść wejścia/wyjścia do listy v-for przy użyciu <TransitionGroup>:

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

Przejścia ruchu ​

Powyższa demonstracja ma kilka oczywistych wad: gdy element jest wstawiany lub usuwany, otaczające go elementy natychmiast "przeskakują" na swoje miejsce, zamiast poruszać się płynnie. Możemy to naprawić, dodając kilka dodatkowych reguł CSS:

.list-move, /* zastosuj przejście do poruszających się elementów */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* upewnij się, że wychodzące elementy są usuwane z przepływu układu,
  aby animacje ruchu mogły być obliczone poprawnie. */
.list-leave-active {
  position: absolute;
}

Teraz wygląda to znacznie lepiej - nawet animacja jest płynna, gdy cała lista jest przetasowywana:

Pełny przykład

Rozłożone w czasie przejścia listy ​

Poprzez komunikację z przejściami JavaScript za pomocą atrybutów danych, możliwe jest również rozłożenie w czasie przejść na liście. Najpierw renderujemy indeks elementu jako atrybut data na elemencie DOM:

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

Następnie, w hookach JavaScript, animujemy element z opóźnieniem bazującym na atrybucie data. Ten przykład wykorzystuje bibliotekę GSAP do wykonania animacji:

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

Powiązane

• <TransitionGroup> dokumentacja API