[{"data":1,"prerenderedAt":1603},["ShallowReactive",2],{"navigation_docs":3,"i-nanime:logo":163,"-components-transition-styles":170,"-components-transition-styles-surround":1571,"preview-examples\u002Fcomponents\u002FTransitionCustomStylesDemo.vue-false":1576,"mdc--o6fiwk-key":1576},[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":106,"body":172,"description":1562,"extension":1563,"links":1564,"meta":1565,"navigation":1566,"path":107,"seo":1567,"stem":108,"__hash__":1570},"docs\u002F3.components\u002F2.transition-styles.md",{"type":173,"value":174,"toc":1557},"minimark",[175,202,207,336,339,343,354,359,1053,1059,1063,1074,1553],[176,177,178,179,183,184,187,188,191,192,201],"p",{},"A style is a named set of AnimeJS params for ",[180,181,182],"code",{},"enter",", ",[180,185,186],{},"leave"," and ",[180,189,190],{},"move",".\nPass its name to the animation props of\n",[193,194,195,187,198],"a",{"href":102},[180,196,197],{},"\u003CAnimeTransition>",[180,199,200],{},"\u003CAnimeTransitionGroup>",".",[203,204,206],"h2",{"id":205},"built-in-styles","Built-in styles",[208,209,210,230],"table",{},[211,212,213],"thead",{},[214,215,216,221,224,227],"tr",{},[217,218,220],"th",{"align":219},"left","Style",[217,222,223],{"align":219},"Animates",[217,225,226],{"align":219},"Enter",[217,228,229],{"align":219},"Leave",[231,232,233,250,266,279,293,306,320],"tbody",{},[214,234,235,241,244,247],{},[236,237,238],"td",{"align":219},[180,239,240],{},"fade",[236,242,243],{"align":219},"opacity",[236,245,246],{"align":219},"300ms",[236,248,249],{"align":219},"200ms",[214,251,252,257,260,263],{},[236,253,254],{"align":219},[180,255,256],{},"slide-up",[236,258,259],{"align":219},"opacity, y 20px",[236,261,262],{"align":219},"350ms",[236,264,265],{"align":219},"250ms",[214,267,268,273,275,277],{},[236,269,270],{"align":219},[180,271,272],{},"slide-down",[236,274,259],{"align":219},[236,276,262],{"align":219},[236,278,265],{"align":219},[214,280,281,286,289,291],{},[236,282,283],{"align":219},[180,284,285],{},"slide-left",[236,287,288],{"align":219},"opacity, x 20px",[236,290,262],{"align":219},[236,292,265],{"align":219},[214,294,295,300,302,304],{},[236,296,297],{"align":219},[180,298,299],{},"slide-right",[236,301,288],{"align":219},[236,303,262],{"align":219},[236,305,265],{"align":219},[214,307,308,313,316,318],{},[236,309,310],{"align":219},[180,311,312],{},"scale",[236,314,315],{"align":219},"opacity, scale 0.85",[236,317,246],{"align":219},[236,319,249],{"align":219},[214,321,322,327,330,333],{},[236,323,324],{"align":219},[180,325,326],{},"swap",[236,328,329],{"align":219},"opacity, y 10px, scale 0.97",[236,331,332],{"align":219},"260ms",[236,334,335],{"align":219},"160ms",[176,337,338],{},"Inline params beat a style name, and a name beats the default. A style\nthat does not set the part asked for, or an unknown name, uses the default.",[203,340,342],{"id":341},"custom-styles","Custom styles",[176,344,345,346,349,350,353],{},"Add your own under ",[180,347,348],{},"nanime.transitions"," in ",[180,351,352],{},"app.config.ts",". Any AnimeJS\nparam works, including keyframes, filters and eases. This site defines the\nsix styles in the demo:",[355,356],"render-code-block-preview",{":code":357,"src":358},"false","examples\u002Fcomponents\u002FTransitionCustomStylesDemo.vue",[360,361,362],"collapsible",{"name":352},[363,364,370],"pre",{"className":365,"code":366,"filename":367,"language":368,"meta":369,"style":369},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineAppConfig({\n  nanime: {\n    transitions: {\n      shake: {\n        enter: {\n          opacity: [0, 1],\n          x: [0, -10, 10, -6, 6, 0],\n          duration: 500,\n          ease: 'inOut(2)',\n        },\n        leave: {\n          opacity: 0,\n          x: [0, 8, -8, 0],\n          duration: 300,\n          ease: 'in(2)',\n        },\n      },\n      explode: {\n        enter: {\n          opacity: [0, 1],\n          scale: [0.5, 1],\n          duration: 350,\n          ease: 'outBack(3)',\n        },\n        leave: {\n          opacity: 0,\n          scale: 2,\n          filter: ['blur(0px)', 'blur(10px)'],\n          duration: 400,\n          ease: 'out(3)',\n        },\n      },\n      skew: {\n        enter: {\n          opacity: [0, 1],\n          x: [-24, 0],\n          skewX: [20, 0],\n          duration: 450,\n          ease: 'out(4)',\n        },\n        leave: {\n          opacity: 0,\n          x: 24,\n          skewX: -20,\n          duration: 250,\n          ease: 'in(3)',\n        },\n      },\n    },\n  },\n})\n","app\u002Fapp.config.ts","ts","",[180,371,372,396,409,419,429,439,466,512,525,545,551,561,572,603,615,631,636,642,652,661,680,701,713,729,734,743,754,766,796,808,824,829,834,844,853,872,895,916,928,944,949,958,969,981,994,1006,1022,1027,1032,1038,1044],{"__ignoreMap":369},[373,374,377,381,384,388,392],"span",{"class":375,"line":376},"line",1,[373,378,380],{"class":379},"s7zQu","export",[373,382,383],{"class":379}," default",[373,385,387],{"class":386},"s2Zo4"," defineAppConfig",[373,389,391],{"class":390},"sTEyZ","(",[373,393,395],{"class":394},"sMK4o","{\n",[373,397,399,403,406],{"class":375,"line":398},2,[373,400,402],{"class":401},"swJcz","  nanime",[373,404,405],{"class":394},":",[373,407,408],{"class":394}," {\n",[373,410,412,415,417],{"class":375,"line":411},3,[373,413,414],{"class":401},"    transitions",[373,416,405],{"class":394},[373,418,408],{"class":394},[373,420,422,425,427],{"class":375,"line":421},4,[373,423,424],{"class":401},"      shake",[373,426,405],{"class":394},[373,428,408],{"class":394},[373,430,432,435,437],{"class":375,"line":431},5,[373,433,434],{"class":401},"        enter",[373,436,405],{"class":394},[373,438,408],{"class":394},[373,440,442,445,447,450,454,457,460,463],{"class":375,"line":441},6,[373,443,444],{"class":401},"          opacity",[373,446,405],{"class":394},[373,448,449],{"class":390}," [",[373,451,453],{"class":452},"sbssI","0",[373,455,456],{"class":394},",",[373,458,459],{"class":452}," 1",[373,461,462],{"class":390},"]",[373,464,465],{"class":394},",\n",[373,467,469,472,474,476,478,480,483,486,488,491,493,495,498,500,503,505,508,510],{"class":375,"line":468},7,[373,470,471],{"class":401},"          x",[373,473,405],{"class":394},[373,475,449],{"class":390},[373,477,453],{"class":452},[373,479,456],{"class":394},[373,481,482],{"class":394}," -",[373,484,485],{"class":452},"10",[373,487,456],{"class":394},[373,489,490],{"class":452}," 10",[373,492,456],{"class":394},[373,494,482],{"class":394},[373,496,497],{"class":452},"6",[373,499,456],{"class":394},[373,501,502],{"class":452}," 6",[373,504,456],{"class":394},[373,506,507],{"class":452}," 0",[373,509,462],{"class":390},[373,511,465],{"class":394},[373,513,515,518,520,523],{"class":375,"line":514},8,[373,516,517],{"class":401},"          duration",[373,519,405],{"class":394},[373,521,522],{"class":452}," 500",[373,524,465],{"class":394},[373,526,528,531,533,536,540,543],{"class":375,"line":527},9,[373,529,530],{"class":401},"          ease",[373,532,405],{"class":394},[373,534,535],{"class":394}," '",[373,537,539],{"class":538},"sfazB","inOut(2)",[373,541,542],{"class":394},"'",[373,544,465],{"class":394},[373,546,548],{"class":375,"line":547},10,[373,549,550],{"class":394},"        },\n",[373,552,554,557,559],{"class":375,"line":553},11,[373,555,556],{"class":401},"        leave",[373,558,405],{"class":394},[373,560,408],{"class":394},[373,562,564,566,568,570],{"class":375,"line":563},12,[373,565,444],{"class":401},[373,567,405],{"class":394},[373,569,507],{"class":452},[373,571,465],{"class":394},[373,573,575,577,579,581,583,585,588,590,592,595,597,599,601],{"class":375,"line":574},13,[373,576,471],{"class":401},[373,578,405],{"class":394},[373,580,449],{"class":390},[373,582,453],{"class":452},[373,584,456],{"class":394},[373,586,587],{"class":452}," 8",[373,589,456],{"class":394},[373,591,482],{"class":394},[373,593,594],{"class":452},"8",[373,596,456],{"class":394},[373,598,507],{"class":452},[373,600,462],{"class":390},[373,602,465],{"class":394},[373,604,606,608,610,613],{"class":375,"line":605},14,[373,607,517],{"class":401},[373,609,405],{"class":394},[373,611,612],{"class":452}," 300",[373,614,465],{"class":394},[373,616,618,620,622,624,627,629],{"class":375,"line":617},15,[373,619,530],{"class":401},[373,621,405],{"class":394},[373,623,535],{"class":394},[373,625,626],{"class":538},"in(2)",[373,628,542],{"class":394},[373,630,465],{"class":394},[373,632,634],{"class":375,"line":633},16,[373,635,550],{"class":394},[373,637,639],{"class":375,"line":638},17,[373,640,641],{"class":394},"      },\n",[373,643,645,648,650],{"class":375,"line":644},18,[373,646,647],{"class":401},"      explode",[373,649,405],{"class":394},[373,651,408],{"class":394},[373,653,655,657,659],{"class":375,"line":654},19,[373,656,434],{"class":401},[373,658,405],{"class":394},[373,660,408],{"class":394},[373,662,664,666,668,670,672,674,676,678],{"class":375,"line":663},20,[373,665,444],{"class":401},[373,667,405],{"class":394},[373,669,449],{"class":390},[373,671,453],{"class":452},[373,673,456],{"class":394},[373,675,459],{"class":452},[373,677,462],{"class":390},[373,679,465],{"class":394},[373,681,683,686,688,690,693,695,697,699],{"class":375,"line":682},21,[373,684,685],{"class":401},"          scale",[373,687,405],{"class":394},[373,689,449],{"class":390},[373,691,692],{"class":452},"0.5",[373,694,456],{"class":394},[373,696,459],{"class":452},[373,698,462],{"class":390},[373,700,465],{"class":394},[373,702,704,706,708,711],{"class":375,"line":703},22,[373,705,517],{"class":401},[373,707,405],{"class":394},[373,709,710],{"class":452}," 350",[373,712,465],{"class":394},[373,714,716,718,720,722,725,727],{"class":375,"line":715},23,[373,717,530],{"class":401},[373,719,405],{"class":394},[373,721,535],{"class":394},[373,723,724],{"class":538},"outBack(3)",[373,726,542],{"class":394},[373,728,465],{"class":394},[373,730,732],{"class":375,"line":731},24,[373,733,550],{"class":394},[373,735,737,739,741],{"class":375,"line":736},25,[373,738,556],{"class":401},[373,740,405],{"class":394},[373,742,408],{"class":394},[373,744,746,748,750,752],{"class":375,"line":745},26,[373,747,444],{"class":401},[373,749,405],{"class":394},[373,751,507],{"class":452},[373,753,465],{"class":394},[373,755,757,759,761,764],{"class":375,"line":756},27,[373,758,685],{"class":401},[373,760,405],{"class":394},[373,762,763],{"class":452}," 2",[373,765,465],{"class":394},[373,767,769,772,774,776,778,781,783,785,787,790,792,794],{"class":375,"line":768},28,[373,770,771],{"class":401},"          filter",[373,773,405],{"class":394},[373,775,449],{"class":390},[373,777,542],{"class":394},[373,779,780],{"class":538},"blur(0px)",[373,782,542],{"class":394},[373,784,456],{"class":394},[373,786,535],{"class":394},[373,788,789],{"class":538},"blur(10px)",[373,791,542],{"class":394},[373,793,462],{"class":390},[373,795,465],{"class":394},[373,797,799,801,803,806],{"class":375,"line":798},29,[373,800,517],{"class":401},[373,802,405],{"class":394},[373,804,805],{"class":452}," 400",[373,807,465],{"class":394},[373,809,811,813,815,817,820,822],{"class":375,"line":810},30,[373,812,530],{"class":401},[373,814,405],{"class":394},[373,816,535],{"class":394},[373,818,819],{"class":538},"out(3)",[373,821,542],{"class":394},[373,823,465],{"class":394},[373,825,827],{"class":375,"line":826},31,[373,828,550],{"class":394},[373,830,832],{"class":375,"line":831},32,[373,833,641],{"class":394},[373,835,837,840,842],{"class":375,"line":836},33,[373,838,839],{"class":401},"      skew",[373,841,405],{"class":394},[373,843,408],{"class":394},[373,845,847,849,851],{"class":375,"line":846},34,[373,848,434],{"class":401},[373,850,405],{"class":394},[373,852,408],{"class":394},[373,854,856,858,860,862,864,866,868,870],{"class":375,"line":855},35,[373,857,444],{"class":401},[373,859,405],{"class":394},[373,861,449],{"class":390},[373,863,453],{"class":452},[373,865,456],{"class":394},[373,867,459],{"class":452},[373,869,462],{"class":390},[373,871,465],{"class":394},[373,873,875,877,879,881,884,887,889,891,893],{"class":375,"line":874},36,[373,876,471],{"class":401},[373,878,405],{"class":394},[373,880,449],{"class":390},[373,882,883],{"class":394},"-",[373,885,886],{"class":452},"24",[373,888,456],{"class":394},[373,890,507],{"class":452},[373,892,462],{"class":390},[373,894,465],{"class":394},[373,896,898,901,903,905,908,910,912,914],{"class":375,"line":897},37,[373,899,900],{"class":401},"          skewX",[373,902,405],{"class":394},[373,904,449],{"class":390},[373,906,907],{"class":452},"20",[373,909,456],{"class":394},[373,911,507],{"class":452},[373,913,462],{"class":390},[373,915,465],{"class":394},[373,917,919,921,923,926],{"class":375,"line":918},38,[373,920,517],{"class":401},[373,922,405],{"class":394},[373,924,925],{"class":452}," 450",[373,927,465],{"class":394},[373,929,931,933,935,937,940,942],{"class":375,"line":930},39,[373,932,530],{"class":401},[373,934,405],{"class":394},[373,936,535],{"class":394},[373,938,939],{"class":538},"out(4)",[373,941,542],{"class":394},[373,943,465],{"class":394},[373,945,947],{"class":375,"line":946},40,[373,948,550],{"class":394},[373,950,952,954,956],{"class":375,"line":951},41,[373,953,556],{"class":401},[373,955,405],{"class":394},[373,957,408],{"class":394},[373,959,961,963,965,967],{"class":375,"line":960},42,[373,962,444],{"class":401},[373,964,405],{"class":394},[373,966,507],{"class":452},[373,968,465],{"class":394},[373,970,972,974,976,979],{"class":375,"line":971},43,[373,973,471],{"class":401},[373,975,405],{"class":394},[373,977,978],{"class":452}," 24",[373,980,465],{"class":394},[373,982,984,986,988,990,992],{"class":375,"line":983},44,[373,985,900],{"class":401},[373,987,405],{"class":394},[373,989,482],{"class":394},[373,991,907],{"class":452},[373,993,465],{"class":394},[373,995,997,999,1001,1004],{"class":375,"line":996},45,[373,998,517],{"class":401},[373,1000,405],{"class":394},[373,1002,1003],{"class":452}," 250",[373,1005,465],{"class":394},[373,1007,1009,1011,1013,1015,1018,1020],{"class":375,"line":1008},46,[373,1010,530],{"class":401},[373,1012,405],{"class":394},[373,1014,535],{"class":394},[373,1016,1017],{"class":538},"in(3)",[373,1019,542],{"class":394},[373,1021,465],{"class":394},[373,1023,1025],{"class":375,"line":1024},47,[373,1026,550],{"class":394},[373,1028,1030],{"class":375,"line":1029},48,[373,1031,641],{"class":394},[373,1033,1035],{"class":375,"line":1034},49,[373,1036,1037],{"class":394},"    },\n",[373,1039,1041],{"class":375,"line":1040},50,[373,1042,1043],{"class":394},"  },\n",[373,1045,1047,1050],{"class":375,"line":1046},51,[373,1048,1049],{"class":394},"}",[373,1051,1052],{"class":390},")\n",[176,1054,1055,1056,1058],{},"Use a custom style by name, like a built-in. The editor autocompletes\nthese names in the animation props. A style with a built-in name, such as\n",[180,1057,240],{},", replaces the built-in.",[203,1060,1062],{"id":1061},"sequences","Sequences",[176,1064,1065,1066,1069,1070,1073],{},"Params passed straight to an animation prop take AnimeJS ",[180,1067,1068],{},"keyframes",", so\none ",[180,1071,1072],{},"leave-animation"," can chain two hops, a shake and an explode:",[363,1075,1079],{"className":1076,"code":1077,"language":1078,"meta":369,"style":369},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { AnimationParams } from '#nanime\u002Ftypes'\n\nconst hopShakeExplode: AnimationParams = {\n  keyframes: [\n    { y: -24, duration: 180, ease: 'out(3)' },\n    { y: 0, duration: 150, ease: 'in(3)' },\n    { y: -16, duration: 150, ease: 'out(3)' },\n    { y: 0, duration: 130, ease: 'in(3)' },\n    { x: -8, duration: 70 },\n    { x: 8, duration: 90 },\n    { x: 0, duration: 70 },\n    { scale: 2, opacity: 0, filter: ['blur(0px)', 'blur(10px)'], duration: 400, ease: 'out(3)' },\n  ],\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CAnimeTransition enter-animation=\"scale\" :leave-animation=\"hopShakeExplode\">\n    \u003Cdiv v-if=\"show\" \u002F>\n  \u003C\u002FAnimeTransition>\n\u003C\u002Ftemplate>\n","vue",[180,1080,1081,1109,1137,1143,1161,1171,1211,1244,1279,1312,1336,1357,1377,1444,1451,1456,1465,1469,1478,1513,1536,1545],{"__ignoreMap":369},[373,1082,1083,1086,1089,1093,1096,1099,1102,1104,1106],{"class":375,"line":376},[373,1084,1085],{"class":394},"\u003C",[373,1087,1088],{"class":401},"script",[373,1090,1092],{"class":1091},"spNyl"," setup",[373,1094,1095],{"class":1091}," lang",[373,1097,1098],{"class":394},"=",[373,1100,1101],{"class":394},"\"",[373,1103,368],{"class":538},[373,1105,1101],{"class":394},[373,1107,1108],{"class":394},">\n",[373,1110,1111,1114,1117,1120,1123,1126,1129,1131,1134],{"class":375,"line":398},[373,1112,1113],{"class":379},"import",[373,1115,1116],{"class":379}," type",[373,1118,1119],{"class":394}," {",[373,1121,1122],{"class":390}," AnimationParams",[373,1124,1125],{"class":394}," }",[373,1127,1128],{"class":379}," from",[373,1130,535],{"class":394},[373,1132,1133],{"class":538},"#nanime\u002Ftypes",[373,1135,1136],{"class":394},"'\n",[373,1138,1139],{"class":375,"line":411},[373,1140,1142],{"emptyLinePlaceholder":1141},true,"\n",[373,1144,1145,1148,1151,1153,1156,1159],{"class":375,"line":421},[373,1146,1147],{"class":1091},"const",[373,1149,1150],{"class":390}," hopShakeExplode",[373,1152,405],{"class":394},[373,1154,1122],{"class":1155},"sBMFI",[373,1157,1158],{"class":394}," =",[373,1160,408],{"class":394},[373,1162,1163,1166,1168],{"class":375,"line":431},[373,1164,1165],{"class":401},"  keyframes",[373,1167,405],{"class":394},[373,1169,1170],{"class":390}," [\n",[373,1172,1173,1176,1179,1181,1183,1185,1187,1190,1192,1195,1197,1200,1202,1204,1206,1208],{"class":375,"line":441},[373,1174,1175],{"class":394},"    {",[373,1177,1178],{"class":401}," y",[373,1180,405],{"class":394},[373,1182,482],{"class":394},[373,1184,886],{"class":452},[373,1186,456],{"class":394},[373,1188,1189],{"class":401}," duration",[373,1191,405],{"class":394},[373,1193,1194],{"class":452}," 180",[373,1196,456],{"class":394},[373,1198,1199],{"class":401}," ease",[373,1201,405],{"class":394},[373,1203,535],{"class":394},[373,1205,819],{"class":538},[373,1207,542],{"class":394},[373,1209,1210],{"class":394}," },\n",[373,1212,1213,1215,1217,1219,1221,1223,1225,1227,1230,1232,1234,1236,1238,1240,1242],{"class":375,"line":468},[373,1214,1175],{"class":394},[373,1216,1178],{"class":401},[373,1218,405],{"class":394},[373,1220,507],{"class":452},[373,1222,456],{"class":394},[373,1224,1189],{"class":401},[373,1226,405],{"class":394},[373,1228,1229],{"class":452}," 150",[373,1231,456],{"class":394},[373,1233,1199],{"class":401},[373,1235,405],{"class":394},[373,1237,535],{"class":394},[373,1239,1017],{"class":538},[373,1241,542],{"class":394},[373,1243,1210],{"class":394},[373,1245,1246,1248,1250,1252,1254,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275,1277],{"class":375,"line":514},[373,1247,1175],{"class":394},[373,1249,1178],{"class":401},[373,1251,405],{"class":394},[373,1253,482],{"class":394},[373,1255,1256],{"class":452},"16",[373,1258,456],{"class":394},[373,1260,1189],{"class":401},[373,1262,405],{"class":394},[373,1264,1229],{"class":452},[373,1266,456],{"class":394},[373,1268,1199],{"class":401},[373,1270,405],{"class":394},[373,1272,535],{"class":394},[373,1274,819],{"class":538},[373,1276,542],{"class":394},[373,1278,1210],{"class":394},[373,1280,1281,1283,1285,1287,1289,1291,1293,1295,1298,1300,1302,1304,1306,1308,1310],{"class":375,"line":527},[373,1282,1175],{"class":394},[373,1284,1178],{"class":401},[373,1286,405],{"class":394},[373,1288,507],{"class":452},[373,1290,456],{"class":394},[373,1292,1189],{"class":401},[373,1294,405],{"class":394},[373,1296,1297],{"class":452}," 130",[373,1299,456],{"class":394},[373,1301,1199],{"class":401},[373,1303,405],{"class":394},[373,1305,535],{"class":394},[373,1307,1017],{"class":538},[373,1309,542],{"class":394},[373,1311,1210],{"class":394},[373,1313,1314,1316,1319,1321,1323,1325,1327,1329,1331,1334],{"class":375,"line":547},[373,1315,1175],{"class":394},[373,1317,1318],{"class":401}," x",[373,1320,405],{"class":394},[373,1322,482],{"class":394},[373,1324,594],{"class":452},[373,1326,456],{"class":394},[373,1328,1189],{"class":401},[373,1330,405],{"class":394},[373,1332,1333],{"class":452}," 70",[373,1335,1210],{"class":394},[373,1337,1338,1340,1342,1344,1346,1348,1350,1352,1355],{"class":375,"line":553},[373,1339,1175],{"class":394},[373,1341,1318],{"class":401},[373,1343,405],{"class":394},[373,1345,587],{"class":452},[373,1347,456],{"class":394},[373,1349,1189],{"class":401},[373,1351,405],{"class":394},[373,1353,1354],{"class":452}," 90",[373,1356,1210],{"class":394},[373,1358,1359,1361,1363,1365,1367,1369,1371,1373,1375],{"class":375,"line":563},[373,1360,1175],{"class":394},[373,1362,1318],{"class":401},[373,1364,405],{"class":394},[373,1366,507],{"class":452},[373,1368,456],{"class":394},[373,1370,1189],{"class":401},[373,1372,405],{"class":394},[373,1374,1333],{"class":452},[373,1376,1210],{"class":394},[373,1378,1379,1381,1384,1386,1388,1390,1393,1395,1397,1399,1402,1404,1406,1408,1410,1412,1414,1416,1418,1420,1422,1424,1426,1428,1430,1432,1434,1436,1438,1440,1442],{"class":375,"line":574},[373,1380,1175],{"class":394},[373,1382,1383],{"class":401}," scale",[373,1385,405],{"class":394},[373,1387,763],{"class":452},[373,1389,456],{"class":394},[373,1391,1392],{"class":401}," opacity",[373,1394,405],{"class":394},[373,1396,507],{"class":452},[373,1398,456],{"class":394},[373,1400,1401],{"class":401}," filter",[373,1403,405],{"class":394},[373,1405,449],{"class":390},[373,1407,542],{"class":394},[373,1409,780],{"class":538},[373,1411,542],{"class":394},[373,1413,456],{"class":394},[373,1415,535],{"class":394},[373,1417,789],{"class":538},[373,1419,542],{"class":394},[373,1421,462],{"class":390},[373,1423,456],{"class":394},[373,1425,1189],{"class":401},[373,1427,405],{"class":394},[373,1429,805],{"class":452},[373,1431,456],{"class":394},[373,1433,1199],{"class":401},[373,1435,405],{"class":394},[373,1437,535],{"class":394},[373,1439,819],{"class":538},[373,1441,542],{"class":394},[373,1443,1210],{"class":394},[373,1445,1446,1449],{"class":375,"line":605},[373,1447,1448],{"class":390},"  ]",[373,1450,465],{"class":394},[373,1452,1453],{"class":375,"line":617},[373,1454,1455],{"class":394},"}\n",[373,1457,1458,1461,1463],{"class":375,"line":633},[373,1459,1460],{"class":394},"\u003C\u002F",[373,1462,1088],{"class":401},[373,1464,1108],{"class":394},[373,1466,1467],{"class":375,"line":638},[373,1468,1142],{"emptyLinePlaceholder":1141},[373,1470,1471,1473,1476],{"class":375,"line":644},[373,1472,1085],{"class":394},[373,1474,1475],{"class":401},"template",[373,1477,1108],{"class":394},[373,1479,1480,1483,1486,1489,1491,1493,1495,1497,1500,1502,1504,1506,1509,1511],{"class":375,"line":654},[373,1481,1482],{"class":394},"  \u003C",[373,1484,1485],{"class":401},"AnimeTransition",[373,1487,1488],{"class":1091}," enter-animation",[373,1490,1098],{"class":394},[373,1492,1101],{"class":394},[373,1494,312],{"class":538},[373,1496,1101],{"class":394},[373,1498,1499],{"class":394}," :",[373,1501,1072],{"class":1091},[373,1503,1098],{"class":394},[373,1505,1101],{"class":394},[373,1507,1508],{"class":390},"hopShakeExplode",[373,1510,1101],{"class":394},[373,1512,1108],{"class":394},[373,1514,1515,1518,1521,1524,1526,1528,1531,1533],{"class":375,"line":663},[373,1516,1517],{"class":394},"    \u003C",[373,1519,1520],{"class":401},"div",[373,1522,1523],{"class":1091}," v-if",[373,1525,1098],{"class":394},[373,1527,1101],{"class":394},[373,1529,1530],{"class":538},"show",[373,1532,1101],{"class":394},[373,1534,1535],{"class":394}," \u002F>\n",[373,1537,1538,1541,1543],{"class":375,"line":682},[373,1539,1540],{"class":394},"  \u003C\u002F",[373,1542,1485],{"class":401},[373,1544,1108],{"class":394},[373,1546,1547,1549,1551],{"class":375,"line":703},[373,1548,1460],{"class":394},[373,1550,1475],{"class":401},[373,1552,1108],{"class":394},[1554,1555,1556],"style",{},"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":369,"searchDepth":398,"depth":398,"links":1558},[1559,1560,1561],{"id":205,"depth":398,"text":206},{"id":341,"depth":398,"text":342},{"id":1061,"depth":398,"text":1062},"The built-in enter and leave styles, and custom ones in app.config.ts.","md",null,{},{"icon":109,"badge":89},{"title":1568,"description":1569},"Built-in and custom transition styles in Nuxt","The seven built-in nanime transition styles, and how to define your own Anime.js enter, leave and move styles in app.config.ts with keyframes and eases.","jmGVkfPaECUWkAS7lG8y3cuwMxt9zxtKQjT7BQE1CqM",[1572,1574],{"title":101,"path":102,"stem":103,"description":1573,"icon":104,"badge":89,"children":-1},"Vue's \u003CTransition> and \u003CTransitionGroup> with AnimeJS enter, leave and move animations.",{"title":111,"path":112,"stem":113,"description":1575,"icon":114,"badge":89,"children":-1},"A wrapper that animates its children to their new size and position when state changes.",{"data":1577,"body":1578,"toc":1601},{"title":369,"description":369},{"type":1579,"children":1580},"root",[1581,1586],{"type":1582,"tag":1583,"props":1584,"children":1585},"element","transition-custom-styles-demo",{},[],{"type":1582,"tag":1587,"props":1588,"children":1597},"u-button",{"className":1589,"color":1592,"icon":1593,"target":1594,"to":1595,"variant":1596},[1590,1591],"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\u002FTransitionCustomStylesDemo.vue","link",[1598],{"type":1599,"value":1600},"text","View on GitHub",{"title":369,"searchDepth":398,"depth":398,"links":1602},[],1792591715643]