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

TransitionGroup ​

<TransitionGroup> is a built-in component designed for animating the insertion, removal, and order change of elements or components that are rendered in a list.

Differences from <Transition> ​

<TransitionGroup> supports the same props, CSS transition classes, and JavaScript hook listeners as <Transition>, with the following differences:

TIP

When used in DOM templates, it should be referenced as <transition-group>.

Enter / Leave Transitions ​

Here is an example of applying enter / leave transitions to a v-for list using <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),k=C('

Move Transitions ​

The above demo has some obvious flaws: when an item is inserted or removed, its surrounding items instantly "jump" into place instead of moving smoothly. We can fix this by adding a few additional CSS rules:

css
.list-move, /* apply transition to moving elements */\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/* ensure leaving items are taken out of layout flow so that moving\n   animations can be calculated correctly. */\n.list-leave-active {\n  position: absolute;\n}

Now it looks much better - even animating smoothly when the whole list is shuffled:

',4),B=C('

Full Example

Staggering List Transitions ​

By communicating with JavaScript transitions through data attributes, it's also possible to stagger transitions in a list. First, we render the index of an item as a data attribute on the DOM element:

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>

Then, in JavaScript hooks, we animate the element with a delay based on the data attribute. This example is using the GreenSock library to perform the animation:

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),q=C('

Full Example in the Playground

Full Example in the Playground

Related

',5),E=JSON.parse('{"title":"TransitionGroup","description":"","frontmatter":{},"headers":[{"level":2,"title":"Differences from ","slug":"differences-from-transition","link":"#differences-from-transition","children":[]},{"level":2,"title":"Enter / Leave Transitions","slug":"enter-leave-transitions","link":"#enter-leave-transitions","children":[]},{"level":2,"title":"Move Transitions","slug":"move-transitions","link":"#move-transitions","children":[]},{"level":2,"title":"Staggering List Transitions","slug":"staggering-list-transitions","link":"#staggering-list-transitions","children":[]}],"relativePath":"guide/built-ins/transition-group.md","filePath":"guide/built-ins/transition-group.md"}'),T={name:"guide/built-ins/transition-group.md"},w=Object.assign(T,{setup:s=>(s,l)=>(n(),a("div",null,[b,o(g),k,o(m),B,o(v),q]))});export{E as __pageData,w as default};