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

Własne klasy TransitionGroup ​

Możesz również wyspecyfikować własne klasy przejść dla elementów przekazując prop moveClass do <TransitionGroup>, tak samo jak własne klasy przejść na <Transition>.

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