[{"data":1,"prerenderedAt":2855},["ShallowReactive",2],{"navigation_docs":3,"i-nanime:logo":163,"-comparisons-vs-nuxt-modules":170,"-comparisons-vs-nuxt-modules-surround":2811,"preview-examples\u002Fcomparison\u002FTransitionListDemo.vue-false":2816,"mdc-bne332-key":2841},[4,35,95,115,129,153],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25,30],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-ph-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-ph-download-simple",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","\u002Fgetting-started\u002Fconfiguration","1.getting-started\u002F3.configuration","i-ph-sliders-horizontal",{"title":26,"path":27,"stem":28,"icon":29},"Performance","\u002Fgetting-started\u002Fperformance","1.getting-started\u002F4.performance","i-ph-gauge",{"title":31,"path":32,"stem":33,"icon":34},"Accessibility","\u002Fgetting-started\u002Faccessibility","1.getting-started\u002F5.accessibility","i-ph-person-simple-circle",{"title":36,"icon":6,"path":37,"stem":38,"children":39,"page":6},"Composables","\u002Fcomposables","2.composables",[40,44,49,54,59,64,69,74,79,84,90],{"title":11,"path":41,"stem":42,"icon":43},"\u002Fcomposables\u002Fintroduction","2.composables\u002F0.introduction","i-ph-stack",{"title":45,"path":46,"stem":47,"icon":48},"useAnimate","\u002Fcomposables\u002Fuse-animate","2.composables\u002F1.use-animate","i-ph-play-circle",{"title":50,"path":51,"stem":52,"icon":53},"useWaapiAnimate","\u002Fcomposables\u002Fuse-waapi-animate","2.composables\u002F2.use-waapi-animate","i-ph-lightning",{"title":55,"path":56,"stem":57,"icon":58},"useAnimatable","\u002Fcomposables\u002Fuse-animatable","2.composables\u002F3.use-animatable","i-ph-cube",{"title":60,"path":61,"stem":62,"icon":63},"useSplitText","\u002Fcomposables\u002Fuse-split-text","2.composables\u002F4.use-split-text","i-ph-text-t",{"title":65,"path":66,"stem":67,"icon":68},"useScrambleText","\u002Fcomposables\u002Fuse-scramble-text","2.composables\u002F5.use-scramble-text","i-ph-shuffle",{"title":70,"path":71,"stem":72,"icon":73},"useDraggable","\u002Fcomposables\u002Fuse-draggable","2.composables\u002F6.use-draggable","i-ph-hand-grabbing",{"title":75,"path":76,"stem":77,"icon":78},"useAnimeTimeline","\u002Fcomposables\u002Fuse-anime-timeline","2.composables\u002F7.use-anime-timeline","i-ph-list-numbers",{"title":80,"path":81,"stem":82,"icon":83},"useAnimeScroll","\u002Fcomposables\u002Fuse-anime-scroll","2.composables\u002F8.use-anime-scroll","i-ph-mouse-scroll",{"title":85,"path":86,"stem":87,"icon":88,"badge":89},"useAnimeLayout","\u002Fcomposables\u002Fuse-anime-layout","2.composables\u002F9.use-anime-layout","i-ph-layout","New",{"title":91,"path":92,"stem":93,"icon":94},"Utilities","\u002Fcomposables\u002Futilities","2.composables\u002F99.utilities","i-ph-puzzle-piece",{"title":96,"icon":6,"path":97,"stem":98,"children":99,"page":6},"Components","\u002Fcomponents","3.components",[100,105,110],{"title":101,"path":102,"stem":103,"icon":104,"badge":89},"Transitions","\u002Fcomponents\u002Ftransitions","3.components\u002F1.transitions","i-ph-arrows-left-right",{"title":106,"path":107,"stem":108,"icon":109,"badge":89},"Transition styles","\u002Fcomponents\u002Ftransition-styles","3.components\u002F2.transition-styles","i-ph-palette",{"title":111,"path":112,"stem":113,"icon":114,"badge":89},"Layout group","\u002Fcomponents\u002Flayout-group","3.components\u002F3.layout-group","i-ph-frame-corners",{"title":116,"icon":6,"path":117,"stem":118,"children":119,"page":6},"Comparisons","\u002Fcomparisons","4.comparisons",[120,125],{"title":121,"path":122,"stem":123,"icon":124,"badge":89},"Compared with Nuxt modules","\u002Fcomparisons\u002Fvs-nuxt-modules","4.comparisons\u002F1.vs-nuxt-modules","i-ph-scales",{"title":126,"path":127,"stem":128,"icon":124,"badge":89},"Compared with Vue packages","\u002Fcomparisons\u002Fvs-vue-packages","4.comparisons\u002F2.vs-vue-packages",{"title":130,"icon":6,"path":131,"stem":132,"children":133,"page":6},"Examples","\u002Fexamples","5.examples",[134,138,143,148],{"title":11,"path":135,"stem":136,"icon":137},"\u002Fexamples\u002Fintroduction","5.examples\u002F0.introduction","i-ph-shapes",{"title":139,"path":140,"stem":141,"icon":142},"Drive","\u002Fexamples\u002Fdrive","5.examples\u002F1.drive","i-ph-hard-drives",{"title":144,"path":145,"stem":146,"icon":147},"Road trip","\u002Fexamples\u002Froad-trip","5.examples\u002F2.road-trip","i-ph-car-profile",{"title":149,"path":150,"stem":151,"icon":152},"Player","\u002Fexamples\u002Fplayer","5.examples\u002F3.player","i-ph-music-notes",{"title":154,"icon":6,"path":155,"stem":156,"children":157,"page":6},"Updates","\u002Fchanges","6.changes",[158],{"title":159,"path":160,"stem":161,"icon":162},"Changelog","\u002Fchanges\u002Fchangelog","6.changes\u002F1.changelog","i-ph-clock-counter-clockwise",{"left":164,"top":165,"width":166,"height":167,"rotate":168,"vFlip":6,"hFlip":6,"body":169},84,74,344,367,0,"\u003Cpath d=\"M124 401 V230 C124 144 186 114 256 114 C326 114 388 144 388 230 V304\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"80\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n  \u003Crect x=\"348\" y=\"358\" width=\"80\" height=\"80\" rx=\"12\" fill=\"#ff4b4b\"\u002F>",{"id":171,"title":121,"body":172,"description":2802,"extension":2803,"links":2804,"meta":2805,"navigation":2806,"path":122,"seo":2807,"stem":123,"__hash__":2810},"docs\u002F4.comparisons\u002F1.vs-nuxt-modules.md",{"type":173,"value":174,"toc":2796},"minimark",[175,200,205,378,382,419,433,437,460,464,467,1589,1604,1608,1624,1629,2778,2792],[176,177,178,179,183,184,187,188,196,197,199],"p",{},"This page compares ",[180,181,182],"code",{},"nanime"," with AnimeJS on its own and with\n",[180,185,186],{},"@hypernym\u002Fnuxt-anime",", as of September 2026. If something is out of\ndate, ",[189,190,195],"a",{"href":191,"rel":192,"target":194},"https:\u002F\u002Fgithub.com\u002Fastraldev\u002Fnanime\u002Fissues",[193],"nofollow","_blank","open an issue",".\nFor Vue packages, see\n",[189,198,126],{"href":127},".",[201,202,204],"h2",{"id":203},"how-do-the-nuxt-modules-compare","How do the Nuxt modules compare?",[206,207,208,226],"table",{},[209,210,211],"thead",{},[212,213,214,218,222],"tr",{},[215,216],"th",{"align":217},"left",[215,219,220],{"align":217},[180,221,182],{},[215,223,224],{"align":217},[180,225,186],{},[227,228,229,246,260,276,289,306,318,337,364],"tbody",{},[212,230,231,235,243],{},[232,233,234],"td",{"align":217},"AnimeJS version",[232,236,237],{"align":217},[238,239,242],"span",{"className":240},[241],"comparison-good","v4",[232,244,245],{"align":217},"v3",[212,247,248,251,257],{},[232,249,250],{"align":217},"Latest release",[232,252,253],{"align":217},[238,254,256],{"className":255},[241],"Sep 2026",[232,258,259],{"align":217},"Sep 2023",[212,261,262,267,273],{},[232,263,264],{"align":217},[189,265,266],{"href":17},"Auto-imports",[232,268,269],{"align":217},[238,270,272],{"className":271},[241],"Yes",[232,274,275],{"align":217},"Opt-in",[212,277,278,281,286],{},[232,279,280],{"align":217},"Safe during SSR, cleans up on unmount",[232,282,283],{"align":217},[238,284,272],{"className":285},[241],[232,287,288],{"align":217},"Manual",[212,290,291,298,303],{},[232,292,293,294,297],{"align":217},"Rebuilds when a ",[180,295,296],{},"ref"," changes",[232,299,300],{"align":217},[238,301,272],{"className":302},[241],[232,304,305],{"align":217},"No",[212,307,308,311,316],{},[232,309,310],{"align":217},"Keeps the playhead on rebuild",[232,312,313],{"align":217},[238,314,272],{"className":315},[241],[232,317,305],{"align":217},[212,319,320,333,335],{},[232,321,322,325,326,325,329],{"align":217},[189,323,324],{"href":46},"Animate",", ",[189,327,328],{"href":76},"timeline",[189,330,332],{"href":331},"\u002Fcomposables\u002Futilities#proxies","SVG helpers",[232,334,272],{"align":217},[232,336,272],{"align":217},[212,338,339,357,362],{},[232,340,341,325,344,325,347,325,350,325,353,356],{"align":217},[189,342,343],{"href":51},"WAAPI",[189,345,346],{"href":71},"draggable",[189,348,349],{"href":61},"text",[189,351,352],{"href":81},"scroll",[189,354,355],{"href":86},"layout"," and more",[232,358,359],{"align":217},[238,360,272],{"className":361},[241],[232,363,305],{"align":217},[212,365,366,371,376],{},[232,367,368],{"align":217},[189,369,370],{"href":102},"Transition components",[232,372,373],{"align":217},[238,374,272],{"className":375},[241],[232,377,305],{"align":217},[379,380,381],"tip",{},"Green marks the rows where the two modules differ. \"Manual\" means the\nmodule leaves that step to your own code.",[176,383,384,390,391,394,395,398,399,402,403,406,407,410,411,414,415,418],{},[189,385,388],{"href":386,"rel":387,"target":194},"https:\u002F\u002Fgithub.com\u002Fhypernym-studio\u002Fnuxt-anime",[193],[180,389,186],{},"\nprovides the AnimeJS v3 ",[180,392,393],{},"anime"," function as ",[180,396,397],{},"$anime",". With\n",[180,400,401],{},"composables: true",", it also auto-imports it as ",[180,404,405],{},"useAnime",". AnimeJS v4\nsplit ",[180,408,409],{},"anime()"," into functions like ",[180,412,413],{},"animate()"," and ",[180,416,417],{},"createTimeline()",", so\nv3 code needs changes to run on v4.",[176,420,421,428,429,432],{},[189,422,425],{"href":423,"rel":424,"target":194},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnuxt-animejs",[193],[180,426,427],{},"nuxt-animejs"," is a Nuxt 2\nmodule built on a ",[180,430,431],{},"v-anime"," directive. Its README says it is no longer\nmaintained.",[201,434,436],{"id":435},"which-should-you-pick","Which should you pick?",[438,439,440,446,449,454],"ul",{},[441,442,443,445],"li",{},[180,444,182],{}," for a Nuxt app on AnimeJS v4, especially one that animates\nlists or values that change.",[441,447,448],{},"AnimeJS on its own for one or two animations that never change.",[441,450,451,453],{},[180,452,186],{}," for an app that stays on AnimeJS v3.",[441,455,456,457,459],{},"A package from ",[189,458,126],{"href":127},"\nfor a Vue app without Nuxt.",[201,461,463],{"id":462},"how-does-a-staggered-entrance-compare","How does a staggered entrance compare?",[176,465,466],{},"The three versions below do the same thing. Four cards fade up one after\nanother on mount, and a Replay button plays the entrance again:",[468,469,470,807,1208],"code-group",{},[471,472,477],"pre",{"className":473,"code":474,"filename":182,"language":475,"meta":476,"style":476},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { stagger } from '#nanime\u002Futils'\n\nconst cards = useTemplateRef('cards')\n\nconst entrance = useAnimate(cards, {\n  translateY: [16, 0],\n  opacity: [0, 1],\n  delay: stagger(80),\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"entrance.restart()\">Replay\u003C\u002Fbutton>\n  \u003Cdiv v-for=\"n in 4\" :key=\"n\" ref=\"cards\" class=\"card\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[180,478,479,513,542,549,578,583,605,632,654,674,682,692,697,707,740,798],{"__ignoreMap":476},[238,480,483,487,491,495,498,501,504,508,510],{"class":481,"line":482},"line",1,[238,484,486],{"class":485},"sMK4o","\u003C",[238,488,490],{"class":489},"swJcz","script",[238,492,494],{"class":493},"spNyl"," setup",[238,496,497],{"class":493}," lang",[238,499,500],{"class":485},"=",[238,502,503],{"class":485},"\"",[238,505,507],{"class":506},"sfazB","ts",[238,509,503],{"class":485},[238,511,512],{"class":485},">\n",[238,514,516,520,523,527,530,533,536,539],{"class":481,"line":515},2,[238,517,519],{"class":518},"s7zQu","import",[238,521,522],{"class":485}," {",[238,524,526],{"class":525},"sTEyZ"," stagger",[238,528,529],{"class":485}," }",[238,531,532],{"class":518}," from",[238,534,535],{"class":485}," '",[238,537,538],{"class":506},"#nanime\u002Futils",[238,540,541],{"class":485},"'\n",[238,543,545],{"class":481,"line":544},3,[238,546,548],{"emptyLinePlaceholder":547},true,"\n",[238,550,552,555,558,560,564,567,570,573,575],{"class":481,"line":551},4,[238,553,554],{"class":493},"const",[238,556,557],{"class":525}," cards ",[238,559,500],{"class":485},[238,561,563],{"class":562},"s2Zo4"," useTemplateRef",[238,565,566],{"class":525},"(",[238,568,569],{"class":485},"'",[238,571,572],{"class":506},"cards",[238,574,569],{"class":485},[238,576,577],{"class":525},")\n",[238,579,581],{"class":481,"line":580},5,[238,582,548],{"emptyLinePlaceholder":547},[238,584,586,588,591,593,596,599,602],{"class":481,"line":585},6,[238,587,554],{"class":493},[238,589,590],{"class":525}," entrance ",[238,592,500],{"class":485},[238,594,595],{"class":562}," useAnimate",[238,597,598],{"class":525},"(cards",[238,600,601],{"class":485},",",[238,603,604],{"class":485}," {\n",[238,606,608,611,614,617,621,623,626,629],{"class":481,"line":607},7,[238,609,610],{"class":489},"  translateY",[238,612,613],{"class":485},":",[238,615,616],{"class":525}," [",[238,618,620],{"class":619},"sbssI","16",[238,622,601],{"class":485},[238,624,625],{"class":619}," 0",[238,627,628],{"class":525},"]",[238,630,631],{"class":485},",\n",[238,633,635,638,640,642,645,647,650,652],{"class":481,"line":634},8,[238,636,637],{"class":489},"  opacity",[238,639,613],{"class":485},[238,641,616],{"class":525},[238,643,644],{"class":619},"0",[238,646,601],{"class":485},[238,648,649],{"class":619}," 1",[238,651,628],{"class":525},[238,653,631],{"class":485},[238,655,657,660,662,664,666,669,672],{"class":481,"line":656},9,[238,658,659],{"class":489},"  delay",[238,661,613],{"class":485},[238,663,526],{"class":562},[238,665,566],{"class":525},[238,667,668],{"class":619},"80",[238,670,671],{"class":525},")",[238,673,631],{"class":485},[238,675,677,680],{"class":481,"line":676},10,[238,678,679],{"class":485},"}",[238,681,577],{"class":525},[238,683,685,688,690],{"class":481,"line":684},11,[238,686,687],{"class":485},"\u003C\u002F",[238,689,490],{"class":489},[238,691,512],{"class":485},[238,693,695],{"class":481,"line":694},12,[238,696,548],{"emptyLinePlaceholder":547},[238,698,700,702,705],{"class":481,"line":699},13,[238,701,486],{"class":485},[238,703,704],{"class":489},"template",[238,706,512],{"class":485},[238,708,710,713,716,719,721,723,726,728,731,734,736,738],{"class":481,"line":709},14,[238,711,712],{"class":485},"  \u003C",[238,714,715],{"class":489},"button",[238,717,718],{"class":493}," @click",[238,720,500],{"class":485},[238,722,503],{"class":485},[238,724,725],{"class":506},"entrance.restart()",[238,727,503],{"class":485},[238,729,730],{"class":485},">",[238,732,733],{"class":525},"Replay",[238,735,687],{"class":485},[238,737,715],{"class":489},[238,739,512],{"class":485},[238,741,743,745,748,751,753,755,758,760,763,765,767,770,772,775,777,779,781,783,786,788,790,793,795],{"class":481,"line":742},15,[238,744,712],{"class":485},[238,746,747],{"class":489},"div",[238,749,750],{"class":493}," v-for",[238,752,500],{"class":485},[238,754,503],{"class":485},[238,756,757],{"class":506},"n in 4",[238,759,503],{"class":485},[238,761,762],{"class":493}," :key",[238,764,500],{"class":485},[238,766,503],{"class":485},[238,768,769],{"class":506},"n",[238,771,503],{"class":485},[238,773,774],{"class":493}," ref",[238,776,500],{"class":485},[238,778,503],{"class":485},[238,780,572],{"class":506},[238,782,503],{"class":485},[238,784,785],{"class":493}," class",[238,787,500],{"class":485},[238,789,503],{"class":485},[238,791,792],{"class":506},"card",[238,794,503],{"class":485},[238,796,797],{"class":485}," \u002F>\n",[238,799,801,803,805],{"class":481,"line":800},16,[238,802,687],{"class":485},[238,804,704],{"class":489},[238,806,512],{"class":485},[471,808,811],{"className":473,"code":809,"filename":810,"language":475,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport { animate } from 'animejs\u002Fanimation'\nimport { stagger } from 'animejs\u002Futils'\nimport type { JSAnimation } from 'animejs'\n\nconst cards = useTemplateRef('cards')\nlet entrance: JSAnimation | undefined\n\nonMounted(() => {\n  if (!cards.value) return\n  entrance = animate(cards.value, {\n    translateY: [16, 0],\n    opacity: [0, 1],\n    delay: stagger(80),\n  })\n})\n\nonBeforeUnmount(() => entrance?.revert())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"entrance?.restart()\">Replay\u003C\u002Fbutton>\n  \u003Cdiv v-for=\"n in 4\" :key=\"n\" ref=\"cards\" class=\"card\" \u002F>\n\u003C\u002Ftemplate>\n","AnimeJS on its own",[180,812,813,833,853,872,895,899,919,938,942,957,981,1003,1022,1041,1058,1065,1071,1076,1099,1108,1113,1122,1150,1199],{"__ignoreMap":476},[238,814,815,817,819,821,823,825,827,829,831],{"class":481,"line":482},[238,816,486],{"class":485},[238,818,490],{"class":489},[238,820,494],{"class":493},[238,822,497],{"class":493},[238,824,500],{"class":485},[238,826,503],{"class":485},[238,828,507],{"class":506},[238,830,503],{"class":485},[238,832,512],{"class":485},[238,834,835,837,839,842,844,846,848,851],{"class":481,"line":515},[238,836,519],{"class":518},[238,838,522],{"class":485},[238,840,841],{"class":525}," animate",[238,843,529],{"class":485},[238,845,532],{"class":518},[238,847,535],{"class":485},[238,849,850],{"class":506},"animejs\u002Fanimation",[238,852,541],{"class":485},[238,854,855,857,859,861,863,865,867,870],{"class":481,"line":544},[238,856,519],{"class":518},[238,858,522],{"class":485},[238,860,526],{"class":525},[238,862,529],{"class":485},[238,864,532],{"class":518},[238,866,535],{"class":485},[238,868,869],{"class":506},"animejs\u002Futils",[238,871,541],{"class":485},[238,873,874,876,879,881,884,886,888,890,893],{"class":481,"line":551},[238,875,519],{"class":518},[238,877,878],{"class":518}," type",[238,880,522],{"class":485},[238,882,883],{"class":525}," JSAnimation",[238,885,529],{"class":485},[238,887,532],{"class":518},[238,889,535],{"class":485},[238,891,892],{"class":506},"animejs",[238,894,541],{"class":485},[238,896,897],{"class":481,"line":580},[238,898,548],{"emptyLinePlaceholder":547},[238,900,901,903,905,907,909,911,913,915,917],{"class":481,"line":585},[238,902,554],{"class":493},[238,904,557],{"class":525},[238,906,500],{"class":485},[238,908,563],{"class":562},[238,910,566],{"class":525},[238,912,569],{"class":485},[238,914,572],{"class":506},[238,916,569],{"class":485},[238,918,577],{"class":525},[238,920,921,924,927,929,932,935],{"class":481,"line":607},[238,922,923],{"class":493},"let",[238,925,926],{"class":525}," entrance",[238,928,613],{"class":485},[238,930,883],{"class":931},"sBMFI",[238,933,934],{"class":485}," |",[238,936,937],{"class":931}," undefined\n",[238,939,940],{"class":481,"line":634},[238,941,548],{"emptyLinePlaceholder":547},[238,943,944,947,949,952,955],{"class":481,"line":656},[238,945,946],{"class":562},"onMounted",[238,948,566],{"class":525},[238,950,951],{"class":485},"()",[238,953,954],{"class":493}," =>",[238,956,604],{"class":485},[238,958,959,962,965,968,970,972,975,978],{"class":481,"line":676},[238,960,961],{"class":518},"  if",[238,963,964],{"class":489}," (",[238,966,967],{"class":485},"!",[238,969,572],{"class":525},[238,971,199],{"class":485},[238,973,974],{"class":525},"value",[238,976,977],{"class":489},") ",[238,979,980],{"class":518},"return\n",[238,982,983,986,989,991,993,995,997,999,1001],{"class":481,"line":684},[238,984,985],{"class":525},"  entrance",[238,987,988],{"class":485}," =",[238,990,841],{"class":562},[238,992,566],{"class":489},[238,994,572],{"class":525},[238,996,199],{"class":485},[238,998,974],{"class":525},[238,1000,601],{"class":485},[238,1002,604],{"class":485},[238,1004,1005,1008,1010,1012,1014,1016,1018,1020],{"class":481,"line":694},[238,1006,1007],{"class":489},"    translateY",[238,1009,613],{"class":485},[238,1011,616],{"class":489},[238,1013,620],{"class":619},[238,1015,601],{"class":485},[238,1017,625],{"class":619},[238,1019,628],{"class":489},[238,1021,631],{"class":485},[238,1023,1024,1027,1029,1031,1033,1035,1037,1039],{"class":481,"line":699},[238,1025,1026],{"class":489},"    opacity",[238,1028,613],{"class":485},[238,1030,616],{"class":489},[238,1032,644],{"class":619},[238,1034,601],{"class":485},[238,1036,649],{"class":619},[238,1038,628],{"class":489},[238,1040,631],{"class":485},[238,1042,1043,1046,1048,1050,1052,1054,1056],{"class":481,"line":709},[238,1044,1045],{"class":489},"    delay",[238,1047,613],{"class":485},[238,1049,526],{"class":562},[238,1051,566],{"class":489},[238,1053,668],{"class":619},[238,1055,671],{"class":489},[238,1057,631],{"class":485},[238,1059,1060,1063],{"class":481,"line":742},[238,1061,1062],{"class":485},"  }",[238,1064,577],{"class":489},[238,1066,1067,1069],{"class":481,"line":800},[238,1068,679],{"class":485},[238,1070,577],{"class":525},[238,1072,1074],{"class":481,"line":1073},17,[238,1075,548],{"emptyLinePlaceholder":547},[238,1077,1079,1082,1084,1086,1088,1090,1093,1096],{"class":481,"line":1078},18,[238,1080,1081],{"class":562},"onBeforeUnmount",[238,1083,566],{"class":525},[238,1085,951],{"class":485},[238,1087,954],{"class":493},[238,1089,926],{"class":525},[238,1091,1092],{"class":485},"?.",[238,1094,1095],{"class":562},"revert",[238,1097,1098],{"class":525},"())\n",[238,1100,1102,1104,1106],{"class":481,"line":1101},19,[238,1103,687],{"class":485},[238,1105,490],{"class":489},[238,1107,512],{"class":485},[238,1109,1111],{"class":481,"line":1110},20,[238,1112,548],{"emptyLinePlaceholder":547},[238,1114,1116,1118,1120],{"class":481,"line":1115},21,[238,1117,486],{"class":485},[238,1119,704],{"class":489},[238,1121,512],{"class":485},[238,1123,1125,1127,1129,1131,1133,1135,1138,1140,1142,1144,1146,1148],{"class":481,"line":1124},22,[238,1126,712],{"class":485},[238,1128,715],{"class":489},[238,1130,718],{"class":493},[238,1132,500],{"class":485},[238,1134,503],{"class":485},[238,1136,1137],{"class":506},"entrance?.restart()",[238,1139,503],{"class":485},[238,1141,730],{"class":485},[238,1143,733],{"class":525},[238,1145,687],{"class":485},[238,1147,715],{"class":489},[238,1149,512],{"class":485},[238,1151,1153,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179,1181,1183,1185,1187,1189,1191,1193,1195,1197],{"class":481,"line":1152},23,[238,1154,712],{"class":485},[238,1156,747],{"class":489},[238,1158,750],{"class":493},[238,1160,500],{"class":485},[238,1162,503],{"class":485},[238,1164,757],{"class":506},[238,1166,503],{"class":485},[238,1168,762],{"class":493},[238,1170,500],{"class":485},[238,1172,503],{"class":485},[238,1174,769],{"class":506},[238,1176,503],{"class":485},[238,1178,774],{"class":493},[238,1180,500],{"class":485},[238,1182,503],{"class":485},[238,1184,572],{"class":506},[238,1186,503],{"class":485},[238,1188,785],{"class":493},[238,1190,500],{"class":485},[238,1192,503],{"class":485},[238,1194,792],{"class":506},[238,1196,503],{"class":485},[238,1198,797],{"class":485},[238,1200,1202,1204,1206],{"class":481,"line":1201},24,[238,1203,687],{"class":485},[238,1205,704],{"class":489},[238,1207,512],{"class":485},[471,1209,1211],{"className":473,"code":1210,"filename":186,"language":475,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport type { AnimeInstance } from 'animejs'\n\nconst { $anime } = useNuxtApp()\n\nconst cards = useTemplateRef('cards')\nlet entrance: AnimeInstance | undefined\n\nonMounted(() => {\n  if (!cards.value) return\n  entrance = $anime({\n    targets: cards.value,\n    translateY: [16, 0],\n    opacity: [0, 1],\n    delay: $anime.stagger(80),\n  })\n})\n\nonBeforeUnmount(() => cards.value && $anime.remove(cards.value))\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"entrance?.restart()\">Replay\u003C\u002Fbutton>\n  \u003Cdiv v-for=\"n in 4\" :key=\"n\" ref=\"cards\" class=\"card\" \u002F>\n\u003C\u002Ftemplate>\n",[180,1212,1213,1233,1254,1258,1277,1281,1301,1315,1319,1331,1349,1363,1379,1397,1415,1436,1442,1448,1452,1486,1494,1498,1506,1532,1580],{"__ignoreMap":476},[238,1214,1215,1217,1219,1221,1223,1225,1227,1229,1231],{"class":481,"line":482},[238,1216,486],{"class":485},[238,1218,490],{"class":489},[238,1220,494],{"class":493},[238,1222,497],{"class":493},[238,1224,500],{"class":485},[238,1226,503],{"class":485},[238,1228,507],{"class":506},[238,1230,503],{"class":485},[238,1232,512],{"class":485},[238,1234,1235,1237,1239,1241,1244,1246,1248,1250,1252],{"class":481,"line":515},[238,1236,519],{"class":518},[238,1238,878],{"class":518},[238,1240,522],{"class":485},[238,1242,1243],{"class":525}," AnimeInstance",[238,1245,529],{"class":485},[238,1247,532],{"class":518},[238,1249,535],{"class":485},[238,1251,892],{"class":506},[238,1253,541],{"class":485},[238,1255,1256],{"class":481,"line":544},[238,1257,548],{"emptyLinePlaceholder":547},[238,1259,1260,1262,1264,1267,1269,1271,1274],{"class":481,"line":551},[238,1261,554],{"class":493},[238,1263,522],{"class":485},[238,1265,1266],{"class":525}," $anime ",[238,1268,679],{"class":485},[238,1270,988],{"class":485},[238,1272,1273],{"class":562}," useNuxtApp",[238,1275,1276],{"class":525},"()\n",[238,1278,1279],{"class":481,"line":580},[238,1280,548],{"emptyLinePlaceholder":547},[238,1282,1283,1285,1287,1289,1291,1293,1295,1297,1299],{"class":481,"line":585},[238,1284,554],{"class":493},[238,1286,557],{"class":525},[238,1288,500],{"class":485},[238,1290,563],{"class":562},[238,1292,566],{"class":525},[238,1294,569],{"class":485},[238,1296,572],{"class":506},[238,1298,569],{"class":485},[238,1300,577],{"class":525},[238,1302,1303,1305,1307,1309,1311,1313],{"class":481,"line":607},[238,1304,923],{"class":493},[238,1306,926],{"class":525},[238,1308,613],{"class":485},[238,1310,1243],{"class":931},[238,1312,934],{"class":485},[238,1314,937],{"class":931},[238,1316,1317],{"class":481,"line":634},[238,1318,548],{"emptyLinePlaceholder":547},[238,1320,1321,1323,1325,1327,1329],{"class":481,"line":656},[238,1322,946],{"class":562},[238,1324,566],{"class":525},[238,1326,951],{"class":485},[238,1328,954],{"class":493},[238,1330,604],{"class":485},[238,1332,1333,1335,1337,1339,1341,1343,1345,1347],{"class":481,"line":676},[238,1334,961],{"class":518},[238,1336,964],{"class":489},[238,1338,967],{"class":485},[238,1340,572],{"class":525},[238,1342,199],{"class":485},[238,1344,974],{"class":525},[238,1346,977],{"class":489},[238,1348,980],{"class":518},[238,1350,1351,1353,1355,1358,1360],{"class":481,"line":684},[238,1352,985],{"class":525},[238,1354,988],{"class":485},[238,1356,1357],{"class":562}," $anime",[238,1359,566],{"class":489},[238,1361,1362],{"class":485},"{\n",[238,1364,1365,1368,1370,1373,1375,1377],{"class":481,"line":694},[238,1366,1367],{"class":489},"    targets",[238,1369,613],{"class":485},[238,1371,1372],{"class":525}," cards",[238,1374,199],{"class":485},[238,1376,974],{"class":525},[238,1378,631],{"class":485},[238,1380,1381,1383,1385,1387,1389,1391,1393,1395],{"class":481,"line":699},[238,1382,1007],{"class":489},[238,1384,613],{"class":485},[238,1386,616],{"class":489},[238,1388,620],{"class":619},[238,1390,601],{"class":485},[238,1392,625],{"class":619},[238,1394,628],{"class":489},[238,1396,631],{"class":485},[238,1398,1399,1401,1403,1405,1407,1409,1411,1413],{"class":481,"line":709},[238,1400,1026],{"class":489},[238,1402,613],{"class":485},[238,1404,616],{"class":489},[238,1406,644],{"class":619},[238,1408,601],{"class":485},[238,1410,649],{"class":619},[238,1412,628],{"class":489},[238,1414,631],{"class":485},[238,1416,1417,1419,1421,1423,1425,1428,1430,1432,1434],{"class":481,"line":742},[238,1418,1045],{"class":489},[238,1420,613],{"class":485},[238,1422,1357],{"class":525},[238,1424,199],{"class":485},[238,1426,1427],{"class":562},"stagger",[238,1429,566],{"class":489},[238,1431,668],{"class":619},[238,1433,671],{"class":489},[238,1435,631],{"class":485},[238,1437,1438,1440],{"class":481,"line":800},[238,1439,1062],{"class":485},[238,1441,577],{"class":489},[238,1443,1444,1446],{"class":481,"line":1073},[238,1445,679],{"class":485},[238,1447,577],{"class":525},[238,1449,1450],{"class":481,"line":1078},[238,1451,548],{"emptyLinePlaceholder":547},[238,1453,1454,1456,1458,1460,1462,1464,1466,1469,1472,1474,1476,1479,1481,1483],{"class":481,"line":1101},[238,1455,1081],{"class":562},[238,1457,566],{"class":525},[238,1459,951],{"class":485},[238,1461,954],{"class":493},[238,1463,1372],{"class":525},[238,1465,199],{"class":485},[238,1467,1468],{"class":525},"value ",[238,1470,1471],{"class":485},"&&",[238,1473,1357],{"class":525},[238,1475,199],{"class":485},[238,1477,1478],{"class":562},"remove",[238,1480,598],{"class":525},[238,1482,199],{"class":485},[238,1484,1485],{"class":525},"value))\n",[238,1487,1488,1490,1492],{"class":481,"line":1110},[238,1489,687],{"class":485},[238,1491,490],{"class":489},[238,1493,512],{"class":485},[238,1495,1496],{"class":481,"line":1115},[238,1497,548],{"emptyLinePlaceholder":547},[238,1499,1500,1502,1504],{"class":481,"line":1124},[238,1501,486],{"class":485},[238,1503,704],{"class":489},[238,1505,512],{"class":485},[238,1507,1508,1510,1512,1514,1516,1518,1520,1522,1524,1526,1528,1530],{"class":481,"line":1152},[238,1509,712],{"class":485},[238,1511,715],{"class":489},[238,1513,718],{"class":493},[238,1515,500],{"class":485},[238,1517,503],{"class":485},[238,1519,1137],{"class":506},[238,1521,503],{"class":485},[238,1523,730],{"class":485},[238,1525,733],{"class":525},[238,1527,687],{"class":485},[238,1529,715],{"class":489},[238,1531,512],{"class":485},[238,1533,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578],{"class":481,"line":1201},[238,1535,712],{"class":485},[238,1537,747],{"class":489},[238,1539,750],{"class":493},[238,1541,500],{"class":485},[238,1543,503],{"class":485},[238,1545,757],{"class":506},[238,1547,503],{"class":485},[238,1549,762],{"class":493},[238,1551,500],{"class":485},[238,1553,503],{"class":485},[238,1555,769],{"class":506},[238,1557,503],{"class":485},[238,1559,774],{"class":493},[238,1561,500],{"class":485},[238,1563,503],{"class":485},[238,1565,572],{"class":506},[238,1567,503],{"class":485},[238,1569,785],{"class":493},[238,1571,500],{"class":485},[238,1573,503],{"class":485},[238,1575,792],{"class":506},[238,1577,503],{"class":485},[238,1579,797],{"class":485},[238,1581,1583,1585,1587],{"class":481,"line":1582},25,[238,1584,687],{"class":485},[238,1586,704],{"class":489},[238,1588,512],{"class":485},[176,1590,1591,1595,1596,1599,1600,1603],{},[189,1592,1593],{"href":46},[180,1594,45],{}," waits for the cards to mount and\nreverts the animation on unmount. ",[180,1597,1598],{},"entrance"," is the AnimeJS animation, so\nmethods like ",[180,1601,1602],{},"restart()"," work as the AnimeJS docs describe.",[201,1605,1607],{"id":1606},"how-do-lists-animate-in-and-out","How do lists animate in and out?",[176,1609,1610,1616,1617,1620,1621,1623],{},[189,1611,1613],{"href":1612},"\u002Fcomponents\u002Ftransitions#lists",[180,1614,1615],{},"\u003CAnimeTransitionGroup>"," animates items\nthat enter and leave a ",[180,1618,1619],{},"v-for"," list. AnimeJS\n",[189,1622,355],{"href":86}," slides the other items to their\nnew places. The three versions below scale items in and out:",[1625,1626],"render-code-block-preview",{":code":1627,"src":1628},"false","examples\u002Fcomparison\u002FTransitionListDemo.vue",[468,1630,1631,1841,2319],{},[471,1632,1634],{"className":473,"code":1633,"filename":182,"language":475,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nconst items = ref([1, 2, 3, 4, 5])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAnimeTransitionGroup\n    tag=\"ul\"\n    enter-animation=\"scale\"\n    leave-animation=\"scale\"\n    class=\"relative\"\n  >\n    \u003Cli v-for=\"item in items\" :key=\"item\">{{ item }}\u003C\u002Fli>\n  \u003C\u002FAnimeTransitionGroup>\n\u003C\u002Ftemplate>\n",[180,1635,1636,1656,1696,1704,1708,1716,1723,1737,1751,1764,1778,1783,1823,1833],{"__ignoreMap":476},[238,1637,1638,1640,1642,1644,1646,1648,1650,1652,1654],{"class":481,"line":482},[238,1639,486],{"class":485},[238,1641,490],{"class":489},[238,1643,494],{"class":493},[238,1645,497],{"class":493},[238,1647,500],{"class":485},[238,1649,503],{"class":485},[238,1651,507],{"class":506},[238,1653,503],{"class":485},[238,1655,512],{"class":485},[238,1657,1658,1660,1663,1665,1667,1670,1673,1675,1678,1680,1683,1685,1688,1690,1693],{"class":481,"line":515},[238,1659,554],{"class":493},[238,1661,1662],{"class":525}," items ",[238,1664,500],{"class":485},[238,1666,774],{"class":562},[238,1668,1669],{"class":525},"([",[238,1671,1672],{"class":619},"1",[238,1674,601],{"class":485},[238,1676,1677],{"class":619}," 2",[238,1679,601],{"class":485},[238,1681,1682],{"class":619}," 3",[238,1684,601],{"class":485},[238,1686,1687],{"class":619}," 4",[238,1689,601],{"class":485},[238,1691,1692],{"class":619}," 5",[238,1694,1695],{"class":525},"])\n",[238,1697,1698,1700,1702],{"class":481,"line":544},[238,1699,687],{"class":485},[238,1701,490],{"class":489},[238,1703,512],{"class":485},[238,1705,1706],{"class":481,"line":551},[238,1707,548],{"emptyLinePlaceholder":547},[238,1709,1710,1712,1714],{"class":481,"line":580},[238,1711,486],{"class":485},[238,1713,704],{"class":489},[238,1715,512],{"class":485},[238,1717,1718,1720],{"class":481,"line":585},[238,1719,712],{"class":485},[238,1721,1722],{"class":489},"AnimeTransitionGroup\n",[238,1724,1725,1728,1730,1732,1734],{"class":481,"line":607},[238,1726,1727],{"class":493},"    tag",[238,1729,500],{"class":485},[238,1731,503],{"class":485},[238,1733,438],{"class":506},[238,1735,1736],{"class":485},"\"\n",[238,1738,1739,1742,1744,1746,1749],{"class":481,"line":634},[238,1740,1741],{"class":493},"    enter-animation",[238,1743,500],{"class":485},[238,1745,503],{"class":485},[238,1747,1748],{"class":506},"scale",[238,1750,1736],{"class":485},[238,1752,1753,1756,1758,1760,1762],{"class":481,"line":656},[238,1754,1755],{"class":493},"    leave-animation",[238,1757,500],{"class":485},[238,1759,503],{"class":485},[238,1761,1748],{"class":506},[238,1763,1736],{"class":485},[238,1765,1766,1769,1771,1773,1776],{"class":481,"line":676},[238,1767,1768],{"class":493},"    class",[238,1770,500],{"class":485},[238,1772,503],{"class":485},[238,1774,1775],{"class":506},"relative",[238,1777,1736],{"class":485},[238,1779,1780],{"class":481,"line":684},[238,1781,1782],{"class":485},"  >\n",[238,1784,1785,1788,1790,1792,1794,1796,1799,1801,1803,1805,1807,1810,1812,1814,1817,1819,1821],{"class":481,"line":694},[238,1786,1787],{"class":485},"    \u003C",[238,1789,441],{"class":489},[238,1791,750],{"class":493},[238,1793,500],{"class":485},[238,1795,503],{"class":485},[238,1797,1798],{"class":506},"item in items",[238,1800,503],{"class":485},[238,1802,762],{"class":493},[238,1804,500],{"class":485},[238,1806,503],{"class":485},[238,1808,1809],{"class":506},"item",[238,1811,503],{"class":485},[238,1813,730],{"class":485},[238,1815,1816],{"class":525},"{{ item }}",[238,1818,687],{"class":485},[238,1820,441],{"class":489},[238,1822,512],{"class":485},[238,1824,1825,1828,1831],{"class":481,"line":699},[238,1826,1827],{"class":485},"  \u003C\u002F",[238,1829,1830],{"class":489},"AnimeTransitionGroup",[238,1832,512],{"class":485},[238,1834,1835,1837,1839],{"class":481,"line":709},[238,1836,687],{"class":485},[238,1838,704],{"class":489},[238,1840,512],{"class":485},[471,1842,1844],{"className":473,"code":1843,"filename":810,"language":475,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nimport { animate } from 'animejs\u002Fanimation'\n\nconst items = ref([1, 2, 3, 4, 5])\n\nfunction onEnter(el: Element, done: () => void) {\n  animate(el, {\n    opacity: [0, 1],\n    scale: [0.85, 1],\n    duration: 300,\n    ease: 'out(3)',\n    onComplete: done,\n  })\n}\n\nfunction onLeave(el: Element, done: () => void) {\n  animate(el, {\n    opacity: 0,\n    scale: 0.85,\n    duration: 200,\n    ease: 'in(3)',\n    onComplete: done,\n  })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTransitionGroup tag=\"ul\" :css=\"false\" @enter=\"onEnter\" @leave=\"onLeave\">\n    \u003Cli v-for=\"item in items\" :key=\"item\">{{ item }}\u003C\u002Fli>\n  \u003C\u002FTransitionGroup>\n\u003C\u002Ftemplate>\n",[180,1845,1846,1866,1884,1888,1920,1924,1962,1975,1993,2013,2025,2041,2052,2058,2063,2067,2098,2110,2120,2131,2142,2157,2167,2173,2177,2185,2190,2199,2264,2301,2310],{"__ignoreMap":476},[238,1847,1848,1850,1852,1854,1856,1858,1860,1862,1864],{"class":481,"line":482},[238,1849,486],{"class":485},[238,1851,490],{"class":489},[238,1853,494],{"class":493},[238,1855,497],{"class":493},[238,1857,500],{"class":485},[238,1859,503],{"class":485},[238,1861,507],{"class":506},[238,1863,503],{"class":485},[238,1865,512],{"class":485},[238,1867,1868,1870,1872,1874,1876,1878,1880,1882],{"class":481,"line":515},[238,1869,519],{"class":518},[238,1871,522],{"class":485},[238,1873,841],{"class":525},[238,1875,529],{"class":485},[238,1877,532],{"class":518},[238,1879,535],{"class":485},[238,1881,850],{"class":506},[238,1883,541],{"class":485},[238,1885,1886],{"class":481,"line":544},[238,1887,548],{"emptyLinePlaceholder":547},[238,1889,1890,1892,1894,1896,1898,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918],{"class":481,"line":551},[238,1891,554],{"class":493},[238,1893,1662],{"class":525},[238,1895,500],{"class":485},[238,1897,774],{"class":562},[238,1899,1669],{"class":525},[238,1901,1672],{"class":619},[238,1903,601],{"class":485},[238,1905,1677],{"class":619},[238,1907,601],{"class":485},[238,1909,1682],{"class":619},[238,1911,601],{"class":485},[238,1913,1687],{"class":619},[238,1915,601],{"class":485},[238,1917,1692],{"class":619},[238,1919,1695],{"class":525},[238,1921,1922],{"class":481,"line":580},[238,1923,548],{"emptyLinePlaceholder":547},[238,1925,1926,1929,1932,1934,1938,1940,1943,1945,1948,1950,1953,1955,1958,1960],{"class":481,"line":585},[238,1927,1928],{"class":493},"function",[238,1930,1931],{"class":562}," onEnter",[238,1933,566],{"class":485},[238,1935,1937],{"class":1936},"sHdIc","el",[238,1939,613],{"class":485},[238,1941,1942],{"class":931}," Element",[238,1944,601],{"class":485},[238,1946,1947],{"class":562}," done",[238,1949,613],{"class":485},[238,1951,1952],{"class":485}," ()",[238,1954,954],{"class":493},[238,1956,1957],{"class":931}," void",[238,1959,671],{"class":485},[238,1961,604],{"class":485},[238,1963,1964,1967,1969,1971,1973],{"class":481,"line":607},[238,1965,1966],{"class":562},"  animate",[238,1968,566],{"class":489},[238,1970,1937],{"class":525},[238,1972,601],{"class":485},[238,1974,604],{"class":485},[238,1976,1977,1979,1981,1983,1985,1987,1989,1991],{"class":481,"line":634},[238,1978,1026],{"class":489},[238,1980,613],{"class":485},[238,1982,616],{"class":489},[238,1984,644],{"class":619},[238,1986,601],{"class":485},[238,1988,649],{"class":619},[238,1990,628],{"class":489},[238,1992,631],{"class":485},[238,1994,1995,1998,2000,2002,2005,2007,2009,2011],{"class":481,"line":656},[238,1996,1997],{"class":489},"    scale",[238,1999,613],{"class":485},[238,2001,616],{"class":489},[238,2003,2004],{"class":619},"0.85",[238,2006,601],{"class":485},[238,2008,649],{"class":619},[238,2010,628],{"class":489},[238,2012,631],{"class":485},[238,2014,2015,2018,2020,2023],{"class":481,"line":676},[238,2016,2017],{"class":489},"    duration",[238,2019,613],{"class":485},[238,2021,2022],{"class":619}," 300",[238,2024,631],{"class":485},[238,2026,2027,2030,2032,2034,2037,2039],{"class":481,"line":684},[238,2028,2029],{"class":489},"    ease",[238,2031,613],{"class":485},[238,2033,535],{"class":485},[238,2035,2036],{"class":506},"out(3)",[238,2038,569],{"class":485},[238,2040,631],{"class":485},[238,2042,2043,2046,2048,2050],{"class":481,"line":694},[238,2044,2045],{"class":489},"    onComplete",[238,2047,613],{"class":485},[238,2049,1947],{"class":525},[238,2051,631],{"class":485},[238,2053,2054,2056],{"class":481,"line":699},[238,2055,1062],{"class":485},[238,2057,577],{"class":489},[238,2059,2060],{"class":481,"line":709},[238,2061,2062],{"class":485},"}\n",[238,2064,2065],{"class":481,"line":742},[238,2066,548],{"emptyLinePlaceholder":547},[238,2068,2069,2071,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2096],{"class":481,"line":800},[238,2070,1928],{"class":493},[238,2072,2073],{"class":562}," onLeave",[238,2075,566],{"class":485},[238,2077,1937],{"class":1936},[238,2079,613],{"class":485},[238,2081,1942],{"class":931},[238,2083,601],{"class":485},[238,2085,1947],{"class":562},[238,2087,613],{"class":485},[238,2089,1952],{"class":485},[238,2091,954],{"class":493},[238,2093,1957],{"class":931},[238,2095,671],{"class":485},[238,2097,604],{"class":485},[238,2099,2100,2102,2104,2106,2108],{"class":481,"line":1073},[238,2101,1966],{"class":562},[238,2103,566],{"class":489},[238,2105,1937],{"class":525},[238,2107,601],{"class":485},[238,2109,604],{"class":485},[238,2111,2112,2114,2116,2118],{"class":481,"line":1078},[238,2113,1026],{"class":489},[238,2115,613],{"class":485},[238,2117,625],{"class":619},[238,2119,631],{"class":485},[238,2121,2122,2124,2126,2129],{"class":481,"line":1101},[238,2123,1997],{"class":489},[238,2125,613],{"class":485},[238,2127,2128],{"class":619}," 0.85",[238,2130,631],{"class":485},[238,2132,2133,2135,2137,2140],{"class":481,"line":1110},[238,2134,2017],{"class":489},[238,2136,613],{"class":485},[238,2138,2139],{"class":619}," 200",[238,2141,631],{"class":485},[238,2143,2144,2146,2148,2150,2153,2155],{"class":481,"line":1115},[238,2145,2029],{"class":489},[238,2147,613],{"class":485},[238,2149,535],{"class":485},[238,2151,2152],{"class":506},"in(3)",[238,2154,569],{"class":485},[238,2156,631],{"class":485},[238,2158,2159,2161,2163,2165],{"class":481,"line":1124},[238,2160,2045],{"class":489},[238,2162,613],{"class":485},[238,2164,1947],{"class":525},[238,2166,631],{"class":485},[238,2168,2169,2171],{"class":481,"line":1152},[238,2170,1062],{"class":485},[238,2172,577],{"class":489},[238,2174,2175],{"class":481,"line":1201},[238,2176,2062],{"class":485},[238,2178,2179,2181,2183],{"class":481,"line":1582},[238,2180,687],{"class":485},[238,2182,490],{"class":489},[238,2184,512],{"class":485},[238,2186,2188],{"class":481,"line":2187},26,[238,2189,548],{"emptyLinePlaceholder":547},[238,2191,2193,2195,2197],{"class":481,"line":2192},27,[238,2194,486],{"class":485},[238,2196,704],{"class":489},[238,2198,512],{"class":485},[238,2200,2202,2204,2207,2210,2212,2214,2216,2218,2221,2224,2226,2228,2231,2233,2236,2239,2241,2243,2246,2248,2250,2253,2255,2257,2260,2262],{"class":481,"line":2201},28,[238,2203,712],{"class":485},[238,2205,2206],{"class":489},"TransitionGroup",[238,2208,2209],{"class":493}," tag",[238,2211,500],{"class":485},[238,2213,503],{"class":485},[238,2215,438],{"class":506},[238,2217,503],{"class":485},[238,2219,2220],{"class":485}," :",[238,2222,2223],{"class":493},"css",[238,2225,500],{"class":485},[238,2227,503],{"class":485},[238,2229,1627],{"class":2230},"sfNiH",[238,2232,503],{"class":485},[238,2234,2235],{"class":485}," @",[238,2237,2238],{"class":493},"enter",[238,2240,500],{"class":485},[238,2242,503],{"class":485},[238,2244,2245],{"class":525},"onEnter",[238,2247,503],{"class":485},[238,2249,2235],{"class":485},[238,2251,2252],{"class":493},"leave",[238,2254,500],{"class":485},[238,2256,503],{"class":485},[238,2258,2259],{"class":525},"onLeave",[238,2261,503],{"class":485},[238,2263,512],{"class":485},[238,2265,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2293,2295,2297,2299],{"class":481,"line":2266},29,[238,2268,1787],{"class":485},[238,2270,441],{"class":489},[238,2272,750],{"class":493},[238,2274,500],{"class":485},[238,2276,503],{"class":485},[238,2278,1798],{"class":506},[238,2280,503],{"class":485},[238,2282,762],{"class":493},[238,2284,500],{"class":485},[238,2286,503],{"class":485},[238,2288,1809],{"class":506},[238,2290,503],{"class":485},[238,2292,730],{"class":485},[238,2294,1816],{"class":525},[238,2296,687],{"class":485},[238,2298,441],{"class":489},[238,2300,512],{"class":485},[238,2302,2304,2306,2308],{"class":481,"line":2303},30,[238,2305,1827],{"class":485},[238,2307,2206],{"class":489},[238,2309,512],{"class":485},[238,2311,2313,2315,2317],{"class":481,"line":2312},31,[238,2314,687],{"class":485},[238,2316,704],{"class":489},[238,2318,512],{"class":485},[471,2320,2322],{"className":473,"code":2321,"filename":186,"language":475,"meta":476,"style":476},"\u003Cscript setup lang=\"ts\">\nconst { $anime } = useNuxtApp()\n\nconst items = ref([1, 2, 3, 4, 5])\n\nfunction onEnter(el: Element, done: () => void) {\n  $anime({\n    targets: el,\n    opacity: [0, 1],\n    scale: [0.85, 1],\n    duration: 300,\n    easing: 'easeOutCubic',\n    complete: done,\n  })\n}\n\nfunction onLeave(el: Element, done: () => void) {\n  $anime({\n    targets: el,\n    opacity: 0,\n    scale: 0.85,\n    duration: 200,\n    easing: 'easeInCubic',\n    complete: done,\n  })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTransitionGroup tag=\"ul\" :css=\"false\" @enter=\"onEnter\" @leave=\"onLeave\">\n    \u003Cli v-for=\"item in items\" :key=\"item\">{{ item }}\u003C\u002Fli>\n  \u003C\u002FTransitionGroup>\n\u003C\u002Ftemplate>\n",[180,2323,2324,2344,2360,2364,2396,2400,2430,2439,2450,2468,2486,2496,2512,2523,2529,2533,2537,2567,2575,2585,2595,2605,2615,2630,2640,2646,2650,2658,2662,2670,2724,2760,2769],{"__ignoreMap":476},[238,2325,2326,2328,2330,2332,2334,2336,2338,2340,2342],{"class":481,"line":482},[238,2327,486],{"class":485},[238,2329,490],{"class":489},[238,2331,494],{"class":493},[238,2333,497],{"class":493},[238,2335,500],{"class":485},[238,2337,503],{"class":485},[238,2339,507],{"class":506},[238,2341,503],{"class":485},[238,2343,512],{"class":485},[238,2345,2346,2348,2350,2352,2354,2356,2358],{"class":481,"line":515},[238,2347,554],{"class":493},[238,2349,522],{"class":485},[238,2351,1266],{"class":525},[238,2353,679],{"class":485},[238,2355,988],{"class":485},[238,2357,1273],{"class":562},[238,2359,1276],{"class":525},[238,2361,2362],{"class":481,"line":544},[238,2363,548],{"emptyLinePlaceholder":547},[238,2365,2366,2368,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392,2394],{"class":481,"line":551},[238,2367,554],{"class":493},[238,2369,1662],{"class":525},[238,2371,500],{"class":485},[238,2373,774],{"class":562},[238,2375,1669],{"class":525},[238,2377,1672],{"class":619},[238,2379,601],{"class":485},[238,2381,1677],{"class":619},[238,2383,601],{"class":485},[238,2385,1682],{"class":619},[238,2387,601],{"class":485},[238,2389,1687],{"class":619},[238,2391,601],{"class":485},[238,2393,1692],{"class":619},[238,2395,1695],{"class":525},[238,2397,2398],{"class":481,"line":580},[238,2399,548],{"emptyLinePlaceholder":547},[238,2401,2402,2404,2406,2408,2410,2412,2414,2416,2418,2420,2422,2424,2426,2428],{"class":481,"line":585},[238,2403,1928],{"class":493},[238,2405,1931],{"class":562},[238,2407,566],{"class":485},[238,2409,1937],{"class":1936},[238,2411,613],{"class":485},[238,2413,1942],{"class":931},[238,2415,601],{"class":485},[238,2417,1947],{"class":562},[238,2419,613],{"class":485},[238,2421,1952],{"class":485},[238,2423,954],{"class":493},[238,2425,1957],{"class":931},[238,2427,671],{"class":485},[238,2429,604],{"class":485},[238,2431,2432,2435,2437],{"class":481,"line":607},[238,2433,2434],{"class":562},"  $anime",[238,2436,566],{"class":489},[238,2438,1362],{"class":485},[238,2440,2441,2443,2445,2448],{"class":481,"line":634},[238,2442,1367],{"class":489},[238,2444,613],{"class":485},[238,2446,2447],{"class":525}," el",[238,2449,631],{"class":485},[238,2451,2452,2454,2456,2458,2460,2462,2464,2466],{"class":481,"line":656},[238,2453,1026],{"class":489},[238,2455,613],{"class":485},[238,2457,616],{"class":489},[238,2459,644],{"class":619},[238,2461,601],{"class":485},[238,2463,649],{"class":619},[238,2465,628],{"class":489},[238,2467,631],{"class":485},[238,2469,2470,2472,2474,2476,2478,2480,2482,2484],{"class":481,"line":676},[238,2471,1997],{"class":489},[238,2473,613],{"class":485},[238,2475,616],{"class":489},[238,2477,2004],{"class":619},[238,2479,601],{"class":485},[238,2481,649],{"class":619},[238,2483,628],{"class":489},[238,2485,631],{"class":485},[238,2487,2488,2490,2492,2494],{"class":481,"line":684},[238,2489,2017],{"class":489},[238,2491,613],{"class":485},[238,2493,2022],{"class":619},[238,2495,631],{"class":485},[238,2497,2498,2501,2503,2505,2508,2510],{"class":481,"line":694},[238,2499,2500],{"class":489},"    easing",[238,2502,613],{"class":485},[238,2504,535],{"class":485},[238,2506,2507],{"class":506},"easeOutCubic",[238,2509,569],{"class":485},[238,2511,631],{"class":485},[238,2513,2514,2517,2519,2521],{"class":481,"line":699},[238,2515,2516],{"class":489},"    complete",[238,2518,613],{"class":485},[238,2520,1947],{"class":525},[238,2522,631],{"class":485},[238,2524,2525,2527],{"class":481,"line":709},[238,2526,1062],{"class":485},[238,2528,577],{"class":489},[238,2530,2531],{"class":481,"line":742},[238,2532,2062],{"class":485},[238,2534,2535],{"class":481,"line":800},[238,2536,548],{"emptyLinePlaceholder":547},[238,2538,2539,2541,2543,2545,2547,2549,2551,2553,2555,2557,2559,2561,2563,2565],{"class":481,"line":1073},[238,2540,1928],{"class":493},[238,2542,2073],{"class":562},[238,2544,566],{"class":485},[238,2546,1937],{"class":1936},[238,2548,613],{"class":485},[238,2550,1942],{"class":931},[238,2552,601],{"class":485},[238,2554,1947],{"class":562},[238,2556,613],{"class":485},[238,2558,1952],{"class":485},[238,2560,954],{"class":493},[238,2562,1957],{"class":931},[238,2564,671],{"class":485},[238,2566,604],{"class":485},[238,2568,2569,2571,2573],{"class":481,"line":1078},[238,2570,2434],{"class":562},[238,2572,566],{"class":489},[238,2574,1362],{"class":485},[238,2576,2577,2579,2581,2583],{"class":481,"line":1101},[238,2578,1367],{"class":489},[238,2580,613],{"class":485},[238,2582,2447],{"class":525},[238,2584,631],{"class":485},[238,2586,2587,2589,2591,2593],{"class":481,"line":1110},[238,2588,1026],{"class":489},[238,2590,613],{"class":485},[238,2592,625],{"class":619},[238,2594,631],{"class":485},[238,2596,2597,2599,2601,2603],{"class":481,"line":1115},[238,2598,1997],{"class":489},[238,2600,613],{"class":485},[238,2602,2128],{"class":619},[238,2604,631],{"class":485},[238,2606,2607,2609,2611,2613],{"class":481,"line":1124},[238,2608,2017],{"class":489},[238,2610,613],{"class":485},[238,2612,2139],{"class":619},[238,2614,631],{"class":485},[238,2616,2617,2619,2621,2623,2626,2628],{"class":481,"line":1152},[238,2618,2500],{"class":489},[238,2620,613],{"class":485},[238,2622,535],{"class":485},[238,2624,2625],{"class":506},"easeInCubic",[238,2627,569],{"class":485},[238,2629,631],{"class":485},[238,2631,2632,2634,2636,2638],{"class":481,"line":1201},[238,2633,2516],{"class":489},[238,2635,613],{"class":485},[238,2637,1947],{"class":525},[238,2639,631],{"class":485},[238,2641,2642,2644],{"class":481,"line":1582},[238,2643,1062],{"class":485},[238,2645,577],{"class":489},[238,2647,2648],{"class":481,"line":2187},[238,2649,2062],{"class":485},[238,2651,2652,2654,2656],{"class":481,"line":2192},[238,2653,687],{"class":485},[238,2655,490],{"class":489},[238,2657,512],{"class":485},[238,2659,2660],{"class":481,"line":2201},[238,2661,548],{"emptyLinePlaceholder":547},[238,2663,2664,2666,2668],{"class":481,"line":2266},[238,2665,486],{"class":485},[238,2667,704],{"class":489},[238,2669,512],{"class":485},[238,2671,2672,2674,2676,2678,2680,2682,2684,2686,2688,2690,2692,2694,2696,2698,2700,2702,2704,2706,2708,2710,2712,2714,2716,2718,2720,2722],{"class":481,"line":2303},[238,2673,712],{"class":485},[238,2675,2206],{"class":489},[238,2677,2209],{"class":493},[238,2679,500],{"class":485},[238,2681,503],{"class":485},[238,2683,438],{"class":506},[238,2685,503],{"class":485},[238,2687,2220],{"class":485},[238,2689,2223],{"class":493},[238,2691,500],{"class":485},[238,2693,503],{"class":485},[238,2695,1627],{"class":2230},[238,2697,503],{"class":485},[238,2699,2235],{"class":485},[238,2701,2238],{"class":493},[238,2703,500],{"class":485},[238,2705,503],{"class":485},[238,2707,2245],{"class":525},[238,2709,503],{"class":485},[238,2711,2235],{"class":485},[238,2713,2252],{"class":493},[238,2715,500],{"class":485},[238,2717,503],{"class":485},[238,2719,2259],{"class":525},[238,2721,503],{"class":485},[238,2723,512],{"class":485},[238,2725,2726,2728,2730,2732,2734,2736,2738,2740,2742,2744,2746,2748,2750,2752,2754,2756,2758],{"class":481,"line":2312},[238,2727,1787],{"class":485},[238,2729,441],{"class":489},[238,2731,750],{"class":493},[238,2733,500],{"class":485},[238,2735,503],{"class":485},[238,2737,1798],{"class":506},[238,2739,503],{"class":485},[238,2741,762],{"class":493},[238,2743,500],{"class":485},[238,2745,503],{"class":485},[238,2747,1809],{"class":506},[238,2749,503],{"class":485},[238,2751,730],{"class":485},[238,2753,1816],{"class":525},[238,2755,687],{"class":485},[238,2757,441],{"class":489},[238,2759,512],{"class":485},[238,2761,2763,2765,2767],{"class":481,"line":2762},32,[238,2764,1827],{"class":485},[238,2766,2206],{"class":489},[238,2768,512],{"class":485},[238,2770,2772,2774,2776],{"class":481,"line":2771},33,[238,2773,687],{"class":485},[238,2775,704],{"class":489},[238,2777,512],{"class":485},[176,2779,2780,2781,2783,2784,2787,2788,2791],{},"The AnimeJS and ",[180,2782,186],{}," versions use Vue's\n",[180,2785,2786],{},"\u003CTransitionGroup>"," with ",[180,2789,2790],{},":css=\"false\"",".\nVue animates moves only through a CSS move class, so the other items jump\nto their new places.",[2793,2794,2795],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":476,"searchDepth":515,"depth":515,"links":2797},[2798,2799,2800,2801],{"id":203,"depth":515,"text":204},{"id":435,"depth":515,"text":436},{"id":462,"depth":515,"text":463},{"id":1606,"depth":515,"text":1607},"How nanime compares with AnimeJS on its own in Nuxt, and with nuxt-anime.","md",null,{},{"icon":124,"badge":89},{"title":2808,"description":2809},"nanime vs nuxt-anime: Anime.js modules for Nuxt","Compare nanime with @hypernym\u002Fnuxt-anime and plain Anime.js in Nuxt. SSR safety, auto-imports, cleanup, list transitions and Anime.js v4 support.","u1hnWJPx883BSKIRAZc630F4WGP5j2l-Ggb1BpQtoN8",[2812,2814],{"title":111,"path":112,"stem":113,"description":2813,"icon":114,"badge":89,"children":-1},"A wrapper that animates its children to their new size and position when state changes.",{"title":126,"path":127,"stem":128,"description":2815,"icon":124,"badge":89,"children":-1},"How nanime compares with vue-animejs and v-anime, the Vue packages for AnimeJS v4.",{"data":2817,"body":2818,"toc":2839},{"title":476,"description":476},{"type":2819,"children":2820},"root",[2821,2826],{"type":2822,"tag":2823,"props":2824,"children":2825},"element","transition-list-demo",{},[],{"type":2822,"tag":2827,"props":2828,"children":2836},"u-button",{"className":2829,"color":2832,"icon":2833,"target":194,"to":2834,"variant":2835},[2830,2831],"mt-2.5","pl-0.5","neutral","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fastraldev\u002Fnanime\u002Fblob\u002Fmain\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fcomparison\u002FTransitionListDemo.vue","link",[2837],{"type":349,"value":2838},"View on GitHub",{"title":476,"searchDepth":515,"depth":515,"links":2840},[],{"data":2842,"body":2843,"toc":2853},{"title":476,"description":476},{"type":2819,"children":2844},[2845,2848],{"type":2822,"tag":2823,"props":2846,"children":2847},{},[],{"type":2822,"tag":2827,"props":2849,"children":2851},{"className":2850,"color":2832,"icon":2833,"target":194,"to":2834,"variant":2835},[2830,2831],[2852],{"type":349,"value":2838},{"title":476,"searchDepth":515,"depth":515,"links":2854},[],1792591720903]