import{a0 as s,v as n,b as a,F as l,T as o,O as e,a as t,H as p,X as i,a1 as r,P as c,r as D,Z as F,f as y,R as u}from"./chunks/framework.e4334dac.js";import{g as C}from"./chunks/index.9a14b7c7.js";const d={class:"demo"},g={__name:"ListBasic",setup(c){const D=s([1,2,3,4,5]);let F=D.length+1;function y(){D.splice(C(),0,F++)}function u(){D.splice(C(),1)}function C(){return Math.floor(Math.random()*D.length)}return(s,c)=>(n(),a("div",d,[l("button",{onClick:y},"Aggiungi in una posizione casuale"),l("button",{onClick:u},"Rimuovi da una posizione casuale"),o(r,{name:"list",tag:"ul",style:{"margin-top":"20px"}},{default:e((()=>[(n(!0),a(t,null,p(D,(s=>(n(),a("li",{key:s},i(s),1)))),128))])),_:1})]))}},m={class:"demo"},A={__name:"ListMove",setup(s){const D=c([1,2,3,4,5]);let F=D.value.length+1;function y(){D.value.splice(C(),0,F++)}function u(){D.value.splice(C(),1)}function C(){return Math.floor(Math.random()*D.value.length)}return(s,c)=>(n(),a("div",m,[l("button",{onClick:y},"Aggiungi"),l("button",{onClick:u},"Rimuovi"),l("button",{onClick:c[0]||(c[0]=s=>function(s){let n,a=s.length;for(;0!=a;)n=Math.floor(Math.random()*a),a--,[s[a],s[n]]=[s[n],s[a]];return s}(D.value))},"Mescola"),o(r,{name:"list2",tag:"ul",style:{"margin-top":"20px"}},{default:e((()=>[(n(!0),a(t,null,p(D.value,(s=>(n(),a("li",{class:"list-item",key:s},i(s),1)))),128))])),_:1})]))}},h={class:"demo",style:{height:"265px"}},f=["data-index"],v={__name:"ListStagger",setup(s){const u=[{msg:"Bruce Lee"},{msg:"Jackie Chan"},{msg:"Chuck Norris"},{msg:"Jet Li"},{msg:"Kung Fury"}],d=c(""),g=D((()=>u.filter((s=>s.msg.toLowerCase().includes(d.value.toLowerCase())))));function m(s){s.style.opacity=0,s.style.height=0}function A(s,n){C.to(s,{opacity:1,height:"1.6em",delay:.15*s.dataset.index,onComplete:n})}function v(s,n){C.to(s,{opacity:0,height:0,delay:.15*s.dataset.index,onComplete:n})}return(s,c)=>(n(),a("div",h,[F(l("input",{"onUpdate:modelValue":c[0]||(c[0]=s=>d.value=s),style:{"margin-bottom":"20px"}},null,512),[[y,d.value]]),o(r,{tag:"ul",css:!1,onBeforeEnter:m,onEnter:A,onLeave:v},{default:e((()=>[(n(!0),a(t,null,p(g.value,((s,l)=>(n(),a("li",{key:s.msg,"data-index":l},i(s.msg),9,f)))),128))])),_:1})]))}},k=u('

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:

TIP

Quando utilizzato nei template DOM, dovrebbe essere referenziato come <transition-group>.

Transizioni di Ingresso / Uscita ​

Ecco un esempio di applicazione delle transizioni di ingresso / uscita a un elenco v-for utilizzando <TransitionGroup>:

template
<TransitionGroup name="list" tag="ul">\n  <li v-for="item in items" :key="item">\n    {{ item }}\n  </li>\n</TransitionGroup>
css
.list-enter-active,\n.list-leave-active {\n  transition: all 0.5s ease;\n}\n.list-enter-from,\n.list-leave-to {\n  opacity: 0;\n  transform: translateX(30px);\n}
',10),b=u('

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:

css
.list-move, /* applica la transizione agli elementi in movimento */\n.list-enter-active,\n.list-leave-active {\n  transition: all 0.5s ease;\n}\n\n.list-enter-from,\n.list-leave-to {\n  opacity: 0;\n  transform: translateX(30px);\n}\n\n/* assicurati che gli elementi in uscita siano esclusi dal flusso del layout in modo \n   che le animazioni in movimento possano essere calcolate correttamente.  */\n.list-leave-active {\n  position: absolute;\n}

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

',4),q=u('

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:

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

js
function onEnter(el, done) {\n  gsap.to(el, {\n    opacity: 1,\n    height: '1.6em',\n    delay: el.dataset.index * 0.15,\n    onComplete: done\n  })\n}
',6),B=u('

Esempio completo nel Playground

Esempio completo nel Playground

Correlati

',5),E=JSON.parse('{"title":"TransitionGroup","description":"","frontmatter":{},"headers":[{"level":2,"title":"Differenze rispetto a ","slug":"differences-from-transition","link":"#differences-from-transition","children":[]},{"level":2,"title":"Transizioni di Ingresso / Uscita","slug":"enter-leave-transitions","link":"#enter-leave-transitions","children":[]},{"level":2,"title":"Transizioni di Spostamento","slug":"move-transitions","link":"#move-transitions","children":[]},{"level":2,"title":"Transizioni Sfalsate degli Elementi in un Elenco","slug":"staggering-list-transitions","link":"#staggering-list-transitions","children":[]}],"relativePath":"guide/built-ins/transition-group.md","filePath":"guide/built-ins/transition-group.md"}'),z={name:"guide/built-ins/transition-group.md"},T=Object.assign(z,{setup:s=>(s,l)=>(n(),a("div",null,[k,o(g),b,o(A),q,o(v),B]))});export{E as __pageData,T as default};