TransitionGroup ​

<TransitionGroup> je vestavěná komponenta určená pro animaci vkládání, odstraňování a změny pořadí prvků nebo komponent, které jsou vykreslovány v seznamu.

Rozdíly oproti <Transition> ​

<TransitionGroup> podporuje stejné vlastnosti, CSS třídy přechodu a listenery JavaScriptových událostí jako <Transition>, s následujícími rozdíly:

• Výchozí nastavení nevykresluje obalující element. Můžete však specifikovat element, který bude vykreslen, pomocí vlastnosti tag.

• Režimy přechodu nejsou k dispozici, protože již nepřepínáme mezi navzájem exkluzivními elementy.

• Prvky uvnitř musí vždy mít unikátní atribut key.

• CSS třídy přechodu jsou aplikovány na jednotlivé prvky v seznamu, nikoli na skupinu / kontejner samotný.

Přechody při vstupu / odchodu ​

Zde je příklad použití přechodů při vstupu na / odchodu ze seznamu vytvořeného pomocí v-for s využitím <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);
}

Přechody při pohybu ​

Výše uvedený příklad má několik zjevných nedostatků: když je prvek vložen nebo odstraněn, okolní prvky místo plynulého pohybu okamžitě „skočí“ na své místo. To můžeme opravit přidáním několika dalších CSS pravidel:

.list-move, /* aplikuj přechod na pohybující se prvky */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

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

/* zajistí, že odcházející prvky jsou vyjmuty z layout flow, 
aby bylo možné správně vypočítat pohybové animace */
.list-leave-active {
  position: absolute;
}

Teď to vypadá mnohem lépe - dokonce se plynule animuje, když je celý seznam zamíchán:

Celý příklad

Vlastní třídy přechodu ​

Předáním vlastnosti moveClass do <TransitionGroup> můžete definovat vlastní třídy přechodu (transition classes) pro přesun elementu, podobně jako u komponenty <Transition>.

Posunuté přechody seznamu ​

Komunikací s třídami přechodu pomocí datových atributů je také možné přechody v seznamu posunout (stagger). Nejprve vykreslíme index položky jako datový atribut DOM elementu:

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

Poté pomocí JavaScript událostí animujeme prvek s prodlevou založenou na datovém atributu. Tento příklad používá pro provedení animace knihovnu GSAP:

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

Související

• API reference pro <TransitionGroup>