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>