[{"data":1,"prerenderedAt":1183},["ShallowReactive",2],{"navigation_docs":3,"i-nanime:logo":163,"-components-transitions":170,"-components-transitions-surround":1151,"preview-examples\u002Fcomponents\u002FTransitionGroupListDemo.vue-false":1156,"mdc--544l0s-key":1156},[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":101,"body":172,"description":1142,"extension":1143,"links":1144,"meta":1145,"navigation":1146,"path":102,"seo":1147,"stem":103,"__hash__":1150},"docs\u002F3.components\u002F1.transitions.md",{"type":173,"value":174,"toc":1134},"minimark",[175,209,214,237,321,324,477,492,496,511,515,527,539,729,736,741,750,933,939,943,971,975,978,992,1022,1027,1130],[176,177,178,182,183,186,187,196,197,204,205,208],"p",{},[179,180,181],"code",{},"\u003CAnimeTransition>"," and ",[179,184,185],{},"\u003CAnimeTransitionGroup>"," work like Vue's\n",[188,189,193],"a",{"href":190,"rel":191},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbuilt-ins\u002Ftransition.html",[192],"nofollow",[179,194,195],{},"\u003CTransition>"," and\n",[188,198,201],{"href":199,"rel":200},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbuilt-ins\u002Ftransition-group.html",[192],[179,202,203],{},"\u003CTransitionGroup>",",\nwith AnimeJS running the animations instead of CSS classes. Vue's\ntransition events, such as ",[179,206,207],{},"@after-enter",", and its modes pass through.",[210,211,213],"h2",{"id":212},"usage","Usage",[176,215,216,218,219,224,225,228,229,232,233,236],{},[179,217,181],{}," is a drop-in for Vue's\n",[188,220,222],{"href":190,"rel":221},[192],[179,223,195],{},". It\ntakes one child, toggled by ",[179,226,227],{},"v-if",", ",[179,230,231],{},"v-show"," or a changed ",[179,234,235],{},"key",":",[238,239,244],"pre",{"className":240,"code":241,"language":242,"meta":243,"style":243},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CAnimeTransition>\n    \u003Cdiv v-if=\"show\" \u002F>\n  \u003C\u002FAnimeTransition>\n\u003C\u002Ftemplate>\n","vue","",[179,245,246,262,273,301,311],{"__ignoreMap":243},[247,248,251,255,259],"span",{"class":249,"line":250},"line",1,[247,252,254],{"class":253},"sMK4o","\u003C",[247,256,258],{"class":257},"swJcz","template",[247,260,261],{"class":253},">\n",[247,263,265,268,271],{"class":249,"line":264},2,[247,266,267],{"class":253},"  \u003C",[247,269,270],{"class":257},"AnimeTransition",[247,272,261],{"class":253},[247,274,276,279,282,286,289,292,296,298],{"class":249,"line":275},3,[247,277,278],{"class":253},"    \u003C",[247,280,281],{"class":257},"div",[247,283,285],{"class":284},"spNyl"," v-if",[247,287,288],{"class":253},"=",[247,290,291],{"class":253},"\"",[247,293,295],{"class":294},"sfazB","show",[247,297,291],{"class":253},[247,299,300],{"class":253}," \u002F>\n",[247,302,304,307,309],{"class":249,"line":303},4,[247,305,306],{"class":253},"  \u003C\u002F",[247,308,270],{"class":257},[247,310,261],{"class":253},[247,312,314,317,319],{"class":249,"line":313},5,[247,315,316],{"class":253},"\u003C\u002F",[247,318,258],{"class":257},[247,320,261],{"class":253},[176,322,323],{},"With no props, the element fades in over 300ms and fades out over 200ms.",[325,326,327,347],"table",{},[328,329,330],"thead",{},[331,332,333,338,341,344],"tr",{},[334,335,337],"th",{"align":336},"left","Prop",[334,339,340],{"align":336},"Type",[334,342,343],{"align":336},"Default",[334,345,346],{"align":336},"Description",[348,349,350,382,406,435,457],"tbody",{},[331,351,352,358,374,379],{},[353,354,355],"td",{"align":336},[179,356,357],{},"enterAnimation",[353,359,360,368,369],{"align":336},[179,361,364],{"className":362,"language":363,"style":243},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type",[247,365,367],{"class":366},"sBMFI","AnimeTransitionStyleName"," or ",[179,370,371],{"className":362,"language":363,"style":243},[247,372,373],{"class":366},"AnimationParams",[353,375,376],{"align":336},[179,377,378],{},"'fade'",[353,380,381],{"align":336},"How the element appears: a style name, or AnimeJS params.",[331,383,384,389,399,403],{},[353,385,386],{"align":336},[179,387,388],{},"leaveAnimation",[353,390,391,368,395],{"align":336},[179,392,393],{"className":362,"language":363,"style":243},[247,394,367],{"class":366},[179,396,397],{"className":362,"language":363,"style":243},[247,398,373],{"class":366},[353,400,401],{"align":336},[179,402,378],{},[353,404,405],{"align":336},"How the element disappears: a style name, or AnimeJS params.",[331,407,408,413,424,428],{},[353,409,410],{"align":336},[179,411,412],{},"mode",[353,414,415,228,418,368,421],{"align":336},[179,416,417],{},"'default'",[179,419,420],{},"'in-out'",[179,422,423],{},"'out-in'",[353,425,426],{"align":336},[179,427,417],{},[353,429,430,431,434],{"align":336},"Order when one element replaces another. ",[179,432,433],{},"out-in"," waits for the old one to leave before the new one enters.",[331,436,437,442,449,454],{},[353,438,439],{"align":336},[179,440,441],{},"appear",[353,443,444],{"align":336},[179,445,446],{"className":362,"language":363,"style":243},[247,447,448],{"class":366},"boolean",[353,450,451],{"align":336},[179,452,453],{},"false",[353,455,456],{"align":336},"Run the enter animation on the first render too.",[331,458,459,464,470,474],{},[353,460,461],{"align":336},[179,462,463],{},"completeOnTabHidden",[353,465,466],{"align":336},[179,467,468],{"className":362,"language":363,"style":243},[247,469,448],{"class":366},[353,471,472],{"align":336},[179,473,453],{},[353,475,476],{"align":336},"Jump running animations to their end when the browser tab is hidden.",[176,478,479,480,483,484,486,487,491],{},"Style names come from the built-ins and from ",[179,481,482],{},"app.config.ts",". See\n",[188,485,106],{"href":107},". To change a prop's\ndefault across the app, see\n",[188,488,490],{"href":489},"\u002Fgetting-started\u002Fconfiguration#set-component-defaults","component defaults",".",[210,493,495],{"id":494},"lists","Lists",[176,497,498,500,501,504,505,510],{},[179,499,185],{}," animates ",[179,502,503],{},"v-for"," items that enter and leave.\nAnimeJS ",[188,506,509],{"href":507,"rel":508},"https:\u002F\u002Fanimejs.com\u002Fdocumentation\u002Flayout",[192],"layout"," slides the other\nitems to their new positions.",[512,513],"render-code-block-preview",{":code":453,"src":514},"examples\u002Fcomponents\u002FTransitionGroupListDemo.vue",[516,517,518,519,522,523,526],"note",{},"Give the group ",[179,520,521],{},"position: relative",". Leaving items switch to\n",[179,524,525],{},"position: absolute"," and are placed against it.",[176,528,529,531,532,196,534,536,537,491],{},[179,530,185],{}," takes the props below. Its ",[179,533,441],{},[179,535,463],{}," work as on ",[179,538,181],{},[325,540,541,553],{},[328,542,543],{},[331,544,545,547,549,551],{},[334,546,337],{"align":336},[334,548,340],{"align":336},[334,550,343],{"align":336},[334,552,346],{"align":336},[348,554,555,580,605,627,662,683,706],{},[331,556,557,561,571,577],{},[353,558,559],{"align":336},[179,560,357],{},[353,562,563,368,567],{"align":336},[179,564,565],{"className":362,"language":363,"style":243},[247,566,367],{"class":366},[179,568,569],{"className":362,"language":363,"style":243},[247,570,373],{"class":366},[353,572,573,574],{"align":336},"Fade in, 250ms ",[179,575,576],{},"out(3)",[353,578,579],{"align":336},"How items appear: a style name, or AnimeJS params.",[331,581,582,586,596,602],{},[353,583,584],{"align":336},[179,585,388],{},[353,587,588,368,592],{"align":336},[179,589,590],{"className":362,"language":363,"style":243},[247,591,367],{"class":366},[179,593,594],{"className":362,"language":363,"style":243},[247,595,373],{"class":366},[353,597,598,599],{"align":336},"Fade out, 150ms ",[179,600,601],{},"in(3)",[353,603,604],{"align":336},"How items disappear: a style name, or AnimeJS params.",[331,606,607,612,619,624],{},[353,608,609],{"align":336},[179,610,611],{},"tag",[353,613,614],{"align":336},[179,615,616],{"className":362,"language":363,"style":243},[247,617,618],{"class":366},"string",[353,620,621],{"align":336},[179,622,623],{},"'div'",[353,625,626],{"align":336},"Element rendered around the items.",[331,628,629,634,647,652],{},[353,630,631],{"align":336},[179,632,633],{},"moveAnimation",[353,635,636,228,640,368,645],{"align":336},[179,637,638],{"className":362,"language":363,"style":243},[247,639,367],{"class":366},[179,641,642],{"className":362,"language":363,"style":243},[247,643,644],{"class":366},"AnimeMoveParams",[179,646,453],{},[353,648,649],{"align":336},[179,650,651],{},"{ duration: 350, ease: 'out(3)' }",[353,653,654,655,658,659,661],{"align":336},"How items move to a new position: a style name, ",[179,656,657],{},"{ duration, delay, ease }",", or ",[179,660,453],{}," to skip moves.",[331,663,664,669,675,680],{},[353,665,666],{"align":336},[179,667,668],{},"absoluteLeave",[353,670,671],{"align":336},[179,672,673],{"className":362,"language":363,"style":243},[247,674,448],{"class":366},[353,676,677],{"align":336},[179,678,679],{},"true",[353,681,682],{"align":336},"Take leaving items out of the flow as soon as they start leaving, so the rest close the gap while they animate out.",[331,684,685,690,701,703],{},[353,686,687],{"align":336},[179,688,689],{},"deps",[353,691,692],{"align":336},[179,693,694,697],{"className":362,"language":363,"style":243},[247,695,696],{"class":366},"unknown",[247,698,700],{"class":699},"sTEyZ","[]",[353,702],{"align":336},[353,704,705],{"align":336},"Values or getters that trigger a move animation when they change, including nested changes.",[331,707,708,713,719,723],{},[353,709,710],{"align":336},[179,711,712],{},"shallow",[353,714,715],{"align":336},[179,716,717],{"className":362,"language":363,"style":243},[247,718,448],{"class":366},[353,720,721],{"align":336},[179,722,453],{},[353,724,725,726,728],{"align":336},"Animate only when an entry of ",[179,727,689],{}," is replaced, not when something nested inside it changes.",[176,730,731,732,735],{},"The ",[188,733,734],{"href":140},"Drive example"," switches a group between three\nlayouts while its items enter, leave and expand.",[737,738,740],"h3",{"id":739},"animate-only-when-items-move","Animate only when items move",[176,742,743,744,746,747,749],{},"Without ",[179,745,689],{},", the group measures every element inside it on each\nre-render, even when nothing moved. Pass ",[179,748,689],{}," to measure only when\nsomething can move:",[238,751,754],{"className":240,"code":752,"filename":753,"language":242,"meta":243,"style":243},"\u003Ctemplate>\n  \u003C!-- animates when items are added, removed or reordered -->\n  \u003CAnimeTransitionGroup :deps=\"[]\">\n    \u003Cdiv v-for=\"item in items\" :key=\"item.id\" \u002F>\n  \u003C\u002FAnimeTransitionGroup>\n\n  \u003C!-- also animates when view resizes the items -->\n  \u003CAnimeTransitionGroup :deps=\"[view]\" :class=\"view\">\n    \u003Cdiv v-for=\"item in items\" :key=\"item.id\" \u002F>\n  \u003C\u002FAnimeTransitionGroup>\n\u003C\u002Ftemplate>\n","ItemList.vue",[179,755,756,764,770,792,824,832,839,845,886,915,924],{"__ignoreMap":243},[247,757,758,760,762],{"class":249,"line":250},[247,759,254],{"class":253},[247,761,258],{"class":257},[247,763,261],{"class":253},[247,765,766],{"class":249,"line":264},[247,767,769],{"class":768},"sHwdD","  \u003C!-- animates when items are added, removed or reordered -->\n",[247,771,772,774,777,780,782,784,786,788,790],{"class":249,"line":275},[247,773,267],{"class":253},[247,775,776],{"class":257},"AnimeTransitionGroup",[247,778,779],{"class":253}," :",[247,781,689],{"class":284},[247,783,288],{"class":253},[247,785,291],{"class":253},[247,787,700],{"class":253},[247,789,291],{"class":253},[247,791,261],{"class":253},[247,793,794,796,798,801,803,805,808,810,813,815,817,820,822],{"class":249,"line":303},[247,795,278],{"class":253},[247,797,281],{"class":257},[247,799,800],{"class":284}," v-for",[247,802,288],{"class":253},[247,804,291],{"class":253},[247,806,807],{"class":294},"item in items",[247,809,291],{"class":253},[247,811,812],{"class":284}," :key",[247,814,288],{"class":253},[247,816,291],{"class":253},[247,818,819],{"class":294},"item.id",[247,821,291],{"class":253},[247,823,300],{"class":253},[247,825,826,828,830],{"class":249,"line":313},[247,827,306],{"class":253},[247,829,776],{"class":257},[247,831,261],{"class":253},[247,833,835],{"class":249,"line":834},6,[247,836,838],{"emptyLinePlaceholder":837},true,"\n",[247,840,842],{"class":249,"line":841},7,[247,843,844],{"class":768},"  \u003C!-- also animates when view resizes the items -->\n",[247,846,848,850,852,854,856,858,860,863,866,869,871,873,876,878,880,882,884],{"class":249,"line":847},8,[247,849,267],{"class":253},[247,851,776],{"class":257},[247,853,779],{"class":253},[247,855,689],{"class":284},[247,857,288],{"class":253},[247,859,291],{"class":253},[247,861,862],{"class":253},"[",[247,864,865],{"class":699},"view",[247,867,868],{"class":253},"]",[247,870,291],{"class":253},[247,872,779],{"class":253},[247,874,875],{"class":284},"class",[247,877,288],{"class":253},[247,879,291],{"class":253},[247,881,865],{"class":699},[247,883,291],{"class":253},[247,885,261],{"class":253},[247,887,889,891,893,895,897,899,901,903,905,907,909,911,913],{"class":249,"line":888},9,[247,890,278],{"class":253},[247,892,281],{"class":257},[247,894,800],{"class":284},[247,896,288],{"class":253},[247,898,291],{"class":253},[247,900,807],{"class":294},[247,902,291],{"class":253},[247,904,812],{"class":284},[247,906,288],{"class":253},[247,908,291],{"class":253},[247,910,819],{"class":294},[247,912,291],{"class":253},[247,914,300],{"class":253},[247,916,918,920,922],{"class":249,"line":917},10,[247,919,306],{"class":253},[247,921,776],{"class":257},[247,923,261],{"class":253},[247,925,927,929,931],{"class":249,"line":926},11,[247,928,316],{"class":253},[247,930,258],{"class":257},[247,932,261],{"class":253},[176,934,935,938],{},[188,936,26],{"href":937},"\u002Fgetting-started\u002Fperformance#add-deps-to-list-and-layout-groups","\ncovers what the measuring costs.",[737,940,942],{"id":941},"move-elements-that-are-not-list-items","Move elements that are not list items",[176,944,945,946,951,952,956,957,959,960,962,963,965,966,970],{},"For a change that is not a list update, such as a card expanding, use\n",[188,947,948],{"href":112},[179,949,950],{},"\u003CAnimeLayoutGroup>"," or\n",[188,953,954],{"href":86},[179,955,85],{},". ",[179,958,950],{},"\nalso takes ",[179,961,689],{},", but animates only when a ",[179,964,689],{}," value changes.\n",[188,967,969],{"href":968},"\u002Fcomponents\u002Flayout-group#choosing-between-the-two-groups","Choosing between the two groups","\ncompares them.",[210,972,974],{"id":973},"finish-animations-when-the-tab-is-hidden","Finish animations when the tab is hidden",[176,976,977],{},"AnimeJS pauses its animations while the browser tab is hidden and resumes\nthem when the tab is visible again. Until then, a leaving element stays\nhalf faded. Moving list items stay where they were when the tab was\nhidden.",[176,979,980,981,983,984,986,987,182,989,991],{},"Set ",[179,982,463],{}," to jump the component's running animations to\ntheir end as soon as the tab is hidden. ",[179,985,181],{},",\n",[179,988,185],{},[179,990,950],{}," all take it. Other\nanimations on the page still pause.",[238,993,996],{"className":240,"code":994,"filename":995,"language":242,"meta":243,"style":243},"\u003CAnimeTransition complete-on-tab-hidden>\n  \u003CToast v-if=\"open\" \u002F>\n\u003C\u002FAnimeTransition>\n","components\u002FToastHost.vue",[179,997,998,1009,1014],{"__ignoreMap":243},[247,999,1000,1002,1004,1007],{"class":249,"line":250},[247,1001,254],{"class":253},[247,1003,270],{"class":257},[247,1005,1006],{"class":284}," complete-on-tab-hidden",[247,1008,261],{"class":253},[247,1010,1011],{"class":249,"line":264},[247,1012,1013],{"class":699},"  \u003CToast v-if=\"open\" \u002F>\n",[247,1015,1016,1018,1020],{"class":249,"line":275},[247,1017,316],{"class":253},[247,1019,270],{"class":257},[247,1021,261],{"class":253},[176,1023,1024,1025,236],{},"To turn it on for every instance of a component, set it in\n",[188,1026,490],{"href":489},[238,1028,1033],{"className":1029,"code":1030,"filename":1031,"language":1032,"meta":243,"style":243},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineAppConfig({\n  nanime: {\n    components: {\n      transitionGroup: { completeOnTabHidden: true },\n      layoutGroup: { completeOnTabHidden: true },\n    },\n  },\n})\n","app\u002Fapp.config.ts","ts",[179,1034,1035,1054,1064,1073,1095,1112,1117,1122],{"__ignoreMap":243},[247,1036,1037,1041,1044,1048,1051],{"class":249,"line":250},[247,1038,1040],{"class":1039},"s7zQu","export",[247,1042,1043],{"class":1039}," default",[247,1045,1047],{"class":1046},"s2Zo4"," defineAppConfig",[247,1049,1050],{"class":699},"(",[247,1052,1053],{"class":253},"{\n",[247,1055,1056,1059,1061],{"class":249,"line":264},[247,1057,1058],{"class":257},"  nanime",[247,1060,236],{"class":253},[247,1062,1063],{"class":253}," {\n",[247,1065,1066,1069,1071],{"class":249,"line":275},[247,1067,1068],{"class":257},"    components",[247,1070,236],{"class":253},[247,1072,1063],{"class":253},[247,1074,1075,1078,1080,1083,1086,1088,1092],{"class":249,"line":303},[247,1076,1077],{"class":257},"      transitionGroup",[247,1079,236],{"class":253},[247,1081,1082],{"class":253}," {",[247,1084,1085],{"class":257}," completeOnTabHidden",[247,1087,236],{"class":253},[247,1089,1091],{"class":1090},"sfNiH"," true",[247,1093,1094],{"class":253}," },\n",[247,1096,1097,1100,1102,1104,1106,1108,1110],{"class":249,"line":313},[247,1098,1099],{"class":257},"      layoutGroup",[247,1101,236],{"class":253},[247,1103,1082],{"class":253},[247,1105,1085],{"class":257},[247,1107,236],{"class":253},[247,1109,1091],{"class":1090},[247,1111,1094],{"class":253},[247,1113,1114],{"class":249,"line":834},[247,1115,1116],{"class":253},"    },\n",[247,1118,1119],{"class":249,"line":841},[247,1120,1121],{"class":253},"  },\n",[247,1123,1124,1127],{"class":249,"line":847},[247,1125,1126],{"class":253},"}",[247,1128,1129],{"class":699},")\n",[1131,1132,1133],"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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":243,"searchDepth":264,"depth":264,"links":1135},[1136,1137,1141],{"id":212,"depth":264,"text":213},{"id":494,"depth":264,"text":495,"children":1138},[1139,1140],{"id":739,"depth":275,"text":740},{"id":941,"depth":275,"text":942},{"id":973,"depth":264,"text":974},"Vue's \u003CTransition> and \u003CTransitionGroup> with AnimeJS enter, leave and move animations.","md",null,{},{"icon":104,"badge":89},{"title":1148,"description":1149},"AnimeTransition and AnimeTransitionGroup for Nuxt","Animate v-if, keyed swaps and v-for lists with Anime.js in Nuxt. \u003CAnimeTransition> and \u003CAnimeTransitionGroup> work like Vue transitions, with no CSS.","RA6KylnfQ2n6tbmiVpMW_zPF_bnq4K6fKEJsucOoP6w",[1152,1154],{"title":91,"path":92,"stem":93,"description":1153,"icon":94,"children":-1},"AnimeJS helpers re-exported by nanime: easings, utilities, and text and SVG proxies.",{"title":106,"path":107,"stem":108,"description":1155,"icon":109,"badge":89,"children":-1},"The built-in enter and leave styles, and custom ones in app.config.ts.",{"data":1157,"body":1158,"toc":1181},{"title":243,"description":243},{"type":1159,"children":1160},"root",[1161,1166],{"type":1162,"tag":1163,"props":1164,"children":1165},"element","transition-group-list-demo",{},[],{"type":1162,"tag":1167,"props":1168,"children":1177},"u-button",{"className":1169,"color":1172,"icon":1173,"target":1174,"to":1175,"variant":1176},[1170,1171],"mt-2.5","pl-0.5","neutral","i-simple-icons-github","_blank","https:\u002F\u002Fgithub.com\u002Fastraldev\u002Fnanime\u002Fblob\u002Fmain\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fcomponents\u002FTransitionGroupListDemo.vue","link",[1178],{"type":1179,"value":1180},"text","View on GitHub",{"title":243,"searchDepth":264,"depth":264,"links":1182},[],1792591715643]