TransitionGroup ​

<TransitionGroup> è un componente integrato progettato per animare l'inserimento, la rimozione e la modifica dell'ordine degli elementi, o dei componenti, renderizzati in un elenco.

Differenze rispetto a <Transition> ​

<TransitionGroup> supporta le stesse proprietà, classi di transizione CSS e hook JavaScript di <Transition>, con le seguenti differenze:

• Di default, non renderizza un elemento wrapper. Ma puoi specificare un elemento da renderizzare con la prop tag.

• Le Modalità di Transizione non sono disponibili, dato che non stiamo più alternando elementi mutualmente esclusivi.

• Gli elementi racchiusi al loro interno devono sempre avere un attributo key unico.

• Le classi di transizione CSS verranno applicate ai singoli elementi nell'elenco, non al loro gruppo / contenitore.

Transizioni di Ingresso / Uscita ​

Ecco un esempio di applicazione delle transizioni di ingresso / uscita a un elenco v-for utilizzando <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);
}

Transizioni di Spostamento ​

La demo sopra ha alcuni difetti evidenti: quando un elemento viene inserito o rimosso, gli elementi circostanti "saltano" istantaneamente al loro posto invece di muoversi in modo fluido. Possiamo correggere questo comportamento tramite alcune regole CSS aggiuntive:

.list-move, /* applica la transizione agli elementi in movimento */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

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

/* assicurati che gli elementi in uscita siano esclusi dal flusso del layout in modo 
   che le animazioni in movimento possano essere calcolate correttamente.  */
.list-leave-active {
  position: absolute;
}

Ora sembra molto meglio, con un'animazione fluida anche quando l'intera lista viene rimescolata:

Esempio Completo

Transizioni Sfalsate degli Elementi in un Elenco ​

Comunicando con le transizioni JavaScript tramite i data attribute, è possibile anche sfalsare le transizioni in un elenco. Per prima cosa, visualizziamo l'indice di un elemento in un data attribute sull'elemento 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>

Poi, negli hook JavaScript, animiamo l'elemento con un ritardo basato sull'attributo dei dati. Questo esempio utilizza la libreria GreenSock per eseguire l'animazione:

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

Correlati

• Referenza API <TransitionGroup>