[{"data":1,"prerenderedAt":1478},["ShallowReactive",2],{"docs:animation":3},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,24,29,32,56,59,247,250,255,259,262,276,517,521,539,566,572,671,679,683,698,701,705,726,814,870,876,915,919,934,1263,1271,1289,1296,1300,1307,1340,1344,1351,1475],[8,9,11],"h1",{"id":10},"animation","Animation",[13,14,15],"p",{},"Transitions, keyframes, or JS animation libraries.",[13,17,18,19,23],{},"Nothing animates on its own. Every part mirrors its state onto ",[20,21,22],"code",{},"data-*"," attributes for you to style against, adds a few more that exist only for animation, and holds a closing element in the DOM until its animation has finished.",[25,26,28],"h2",{"id":27},"enter-and-exit-with-css-transitions","Enter and exit with CSS transitions",[13,30,31],{},"Two attributes bracket the transition of anything that opens and closes:",[33,34,35,47],"ul",{},[36,37,38,41,42,46],"li",{},[20,39,40],{},"[data-starting-style]",": the style to transition ",[43,44,45],"strong",{},"from"," as the element enters.",[36,48,49,41,52,55],{},[20,50,51],{},"[data-ending-style]",[43,53,54],{},"to"," as the element leaves.",[13,57,58],{},"Both sit on the animated part (a popup, a backdrop, a panel) only while it's in motion. Put your resting styles on the element and your extremes behind these two selectors:",[60,61,65],"pre",{"language":62,"meta":63,"class":64},"css","title=\"popover.css\"","shiki shiki-themes github-light github-dark has-highlighted dark:github-dark",[20,66,68,81,82,81,97,81,118,81,126,81,146,81,154,81,168,81,179,81,181,81,194,81,205,81,218,81,236,81,242],{"class":67},"language-css",[69,70,73,77],"span",{"class":71,"style":72},"line","display: inline",[69,74,76],{"style":75},"color:#6F42C1;--shiki-dark:#B392F0",".popup",[69,78,80],{"style":79},"color:#24292E;--shiki-dark:#E1E4E8"," {","\n",[69,83,84,88,91,94],{"class":71,"style":72},[69,85,87],{"style":86},"color:#005CC5;--shiki-dark:#79B8FF","  box-sizing",[69,89,90],{"style":79},": ",[69,92,93],{"style":86},"border-box",[69,95,96],{"style":79},";",[69,98,99,102,104,107,111,114,116],{"class":71,"style":72},[69,100,101],{"style":86},"  padding",[69,103,90],{"style":79},[69,105,106],{"style":86},"1",[69,108,110],{"style":109},"color:#D73A49;--shiki-dark:#F97583","rem",[69,112,113],{"style":86}," 1.5",[69,115,110],{"style":109},[69,117,96],{"style":79},[69,119,120,123],{"class":71,"style":72},[69,121,122],{"style":86},"  background-color",[69,124,125],{"style":79},": canvas;",[69,127,128,131,133,136,139,143],{"class":71,"style":72},[69,129,130],{"style":86},"  transform-origin",[69,132,90],{"style":79},[69,134,135],{"style":86},"var",[69,137,138],{"style":79},"(",[69,140,142],{"style":141},"color:#E36209;--shiki-dark:#FFAB70","--transform-origin",[69,144,145],{"style":79},");",[69,147,148,151],{"class":71,"style":72},[69,149,150],{"style":86},"  transition",[69,152,153],{"style":79},":",[69,155,156,159,162,165],{"class":71,"style":72},[69,157,158],{"style":79},"    transform ",[69,160,161],{"style":86},"150",[69,163,164],{"style":109},"ms",[69,166,167],{"style":79},",",[69,169,170,173,175,177],{"class":71,"style":72},[69,171,172],{"style":79},"    opacity ",[69,174,161],{"style":86},[69,176,164],{"style":109},[69,178,96],{"style":79},[69,180],{"class":71,"style":72},[69,182,185,188,191],{"class":183,"style":72},[71,184],"highlighted",[69,186,187],{"style":79},"  &[",[69,189,190],{"style":86},"data-starting-style",[69,192,193],{"style":79},"],",[69,195,197,199,202],{"class":196,"style":72},[71,184],[69,198,187],{"style":79},[69,200,201],{"style":86},"data-ending-style",[69,203,204],{"style":79},"] {",[69,206,208,211,213,216],{"class":207,"style":72},[71,184],[69,209,210],{"style":86},"    opacity",[69,212,90],{"style":79},[69,214,215],{"style":86},"0",[69,217,96],{"style":79},[69,219,221,224,226,229,231,234],{"class":220,"style":72},[71,184],[69,222,223],{"style":86},"    transform",[69,225,90],{"style":79},[69,227,228],{"style":86},"scale",[69,230,138],{"style":79},[69,232,233],{"style":86},"0.9",[69,235,145],{"style":79},[69,237,239],{"class":238,"style":72},[71,184],[69,240,241],{"style":79},"  }",[69,243,244],{"class":71,"style":72},[69,245,246],{"style":79},"}",[13,248,249],{},"Prefer a transition to a keyframe animation. A transition is reversible mid-flight: a popup dismissed before it finishes opening glides straight back to closed, with no jump and no restart. A keyframe animation has to run to completion, so it visibly snaps when interrupted.",[13,251,252,254],{},[20,253,142],{}," above is set for you on the positioner and inherited by the popup. It points the scale at the trigger, so the popup grows out of the element that spawned it rather than its own center.",[25,256,258],{"id":257},"keyframe-animations","Keyframe animations",[13,260,261],{},"When you want a motion a transition can't express — a spin, a multi-step ease, a bounce — drive it from keyframes keyed off the open\u002Fclosed state:",[33,263,264,270],{},[36,265,266,269],{},[20,267,268],{},"[data-open]",": present while the element is visible.",[36,271,272,275],{},[20,273,274],{},"[data-closed]",": present while it's hidden (including during the exit).",[60,277,279],{"language":62,"meta":63,"class":278},"shiki shiki-themes github-light github-dark dark:github-dark",[20,280,281,81,291,81,298,81,308,81,322,81,326,81,333,81,343,81,357,81,361,81,365,81,367,81,376,81,382,81,392,81,406,81,410,81,416,81,426,81,440,81,444,81,448,81,450,81,462,81,480,81,484,81,486,81,497,81,513],{"class":67},[69,282,283,286,289],{"class":71,"style":72},[69,284,285],{"style":109},"@keyframes",[69,287,288],{"style":141}," scale-in",[69,290,80],{"style":79},[69,292,293,296],{"class":71,"style":72},[69,294,295],{"style":75},"  from",[69,297,80],{"style":79},[69,299,300,302,304,306],{"class":71,"style":72},[69,301,210],{"style":86},[69,303,90],{"style":79},[69,305,215],{"style":86},[69,307,96],{"style":79},[69,309,310,312,314,316,318,320],{"class":71,"style":72},[69,311,223],{"style":86},[69,313,90],{"style":79},[69,315,228],{"style":86},[69,317,138],{"style":79},[69,319,233],{"style":86},[69,321,145],{"style":79},[69,323,324],{"class":71,"style":72},[69,325,241],{"style":79},[69,327,328,331],{"class":71,"style":72},[69,329,330],{"style":75},"  to",[69,332,80],{"style":79},[69,334,335,337,339,341],{"class":71,"style":72},[69,336,210],{"style":86},[69,338,90],{"style":79},[69,340,106],{"style":86},[69,342,96],{"style":79},[69,344,345,347,349,351,353,355],{"class":71,"style":72},[69,346,223],{"style":86},[69,348,90],{"style":79},[69,350,228],{"style":86},[69,352,138],{"style":79},[69,354,106],{"style":86},[69,356,145],{"style":79},[69,358,359],{"class":71,"style":72},[69,360,241],{"style":79},[69,362,363],{"class":71,"style":72},[69,364,246],{"style":79},[69,366],{"class":71,"style":72},[69,368,369,371,374],{"class":71,"style":72},[69,370,285],{"style":109},[69,372,373],{"style":141}," scale-out",[69,375,80],{"style":79},[69,377,378,380],{"class":71,"style":72},[69,379,295],{"style":75},[69,381,80],{"style":79},[69,383,384,386,388,390],{"class":71,"style":72},[69,385,210],{"style":86},[69,387,90],{"style":79},[69,389,106],{"style":86},[69,391,96],{"style":79},[69,393,394,396,398,400,402,404],{"class":71,"style":72},[69,395,223],{"style":86},[69,397,90],{"style":79},[69,399,228],{"style":86},[69,401,138],{"style":79},[69,403,106],{"style":86},[69,405,145],{"style":79},[69,407,408],{"class":71,"style":72},[69,409,241],{"style":79},[69,411,412,414],{"class":71,"style":72},[69,413,330],{"style":75},[69,415,80],{"style":79},[69,417,418,420,422,424],{"class":71,"style":72},[69,419,210],{"style":86},[69,421,90],{"style":79},[69,423,215],{"style":86},[69,425,96],{"style":79},[69,427,428,430,432,434,436,438],{"class":71,"style":72},[69,429,223],{"style":86},[69,431,90],{"style":79},[69,433,228],{"style":86},[69,435,138],{"style":79},[69,437,233],{"style":86},[69,439,145],{"style":79},[69,441,442],{"class":71,"style":72},[69,443,241],{"style":79},[69,445,446],{"class":71,"style":72},[69,447,246],{"style":79},[69,449],{"class":71,"style":72},[69,451,452,454,457,460],{"class":71,"style":72},[69,453,76],{"style":75},[69,455,456],{"style":79},"[",[69,458,459],{"style":75},"data-open",[69,461,204],{"style":79},[69,463,464,467,470,473,475,478],{"class":71,"style":72},[69,465,466],{"style":86},"  animation",[69,468,469],{"style":79},": scale-in ",[69,471,472],{"style":86},"250",[69,474,164],{"style":109},[69,476,477],{"style":86}," ease-out",[69,479,96],{"style":79},[69,481,482],{"class":71,"style":72},[69,483,246],{"style":79},[69,485],{"class":71,"style":72},[69,487,488,490,492,495],{"class":71,"style":72},[69,489,76],{"style":75},[69,491,456],{"style":79},[69,493,494],{"style":75},"data-closed",[69,496,204],{"style":79},[69,498,499,501,504,506,508,511],{"class":71,"style":72},[69,500,466],{"style":86},[69,502,503],{"style":79},": scale-out ",[69,505,472],{"style":86},[69,507,164],{"style":109},[69,509,510],{"style":86}," ease-in",[69,512,96],{"style":79},[69,514,515],{"class":71,"style":72},[69,516,246],{"style":79},[25,518,520],{"id":519},"animating-size","Animating size",[13,522,523,524,529,530,534,535,538],{},"Components that expand and collapse — ",[525,526,528],"a",{"href":527},"\u002Fcollapsible","Collapsible"," and ",[525,531,533],{"href":532},"\u002Faccordion","Accordion"," — can't transition to ",[20,536,537],{},"height: auto","; the browser won't interpolate to an intrinsic size. So they measure the content for you and publish it as a CSS variable on the panel, giving you a concrete pixel target to animate between:",[33,540,541,555],{},[36,542,543,546,547,550,551,554],{},[20,544,545],{},"--collapsible-panel-height"," \u002F ",[20,548,549],{},"--collapsible-panel-width"," on ",[20,552,553],{},"\u003CCollapsible.Panel>",".",[36,556,557,546,560,550,563,554],{},[20,558,559],{},"--accordion-panel-height",[20,561,562],{},"--accordion-panel-width",[20,564,565],{},"\u003CAccordion.Panel>",[13,567,568,569,571],{},"Transition the panel from ",[20,570,215],{}," to the measured size, and clip the overflow so the contents don't spill while it's mid-open:",[60,573,575],{"language":62,"meta":574,"class":64},"title=\"collapsible.css\"",[20,576,577,81,584,81,596,81,611,81,613,81,631,81,635,81,637,81,647,81,657,81,667],{"class":67},[69,578,579,582],{"class":71,"style":72},[69,580,581],{"style":75},".panel",[69,583,80],{"style":79},[69,585,586,589,591,594],{"class":71,"style":72},[69,587,588],{"style":86},"  overflow",[69,590,90],{"style":79},[69,592,593],{"style":86},"hidden",[69,595,96],{"style":79},[69,597,598,600,603,605,607,609],{"class":71,"style":72},[69,599,150],{"style":86},[69,601,602],{"style":79},": height ",[69,604,161],{"style":86},[69,606,164],{"style":109},[69,608,477],{"style":86},[69,610,96],{"style":79},[69,612],{"class":71,"style":72},[69,614,616,619,621,623,625,629],{"class":615,"style":72},[71,184],[69,617,618],{"style":86},"  height",[69,620,90],{"style":79},[69,622,135],{"style":86},[69,624,138],{"style":79},[69,626,545],{"style":141,"class":627},[628],"highlighted-word",[69,630,145],{"style":79},[69,632,633],{"class":71,"style":72},[69,634,246],{"style":79},[69,636],{"class":71,"style":72},[69,638,639,641,643,645],{"class":71,"style":72},[69,640,581],{"style":75},[69,642,456],{"style":79},[69,644,190],{"style":75},[69,646,193],{"style":79},[69,648,649,651,653,655],{"class":71,"style":72},[69,650,581],{"style":75},[69,652,456],{"style":79},[69,654,201],{"style":75},[69,656,204],{"style":79},[69,658,659,661,663,665],{"class":71,"style":72},[69,660,618],{"style":86},[69,662,90],{"style":79},[69,664,215],{"style":86},[69,666,96],{"style":79},[69,668,669],{"class":71,"style":72},[69,670,246],{"style":79},[13,672,673,674,546,676,678],{},"The same ",[20,675,40],{},[20,677,51],{}," pair works here.",[25,680,682],{"id":681},"how-the-exit-is-detected","How the exit is detected",[13,684,685,686,529,688,690,691,697],{},"A closing popup gains ",[20,687,274],{},[20,689,51],{},", and is removed a frame later, once every animation on it has finished. The library finds those animations by calling ",[525,692,694],{"href":693},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FElement\u002FgetAnimations",[20,695,696],{},"element.getAnimations()"," on the element itself. CSS transitions, CSS keyframe animations and Web Animations API calls all register there.",[13,699,700],{},"The check is scoped to that one element, not its subtree, so an animation on a child of the popup doesn't count and the popup is hidden out from under it. An element with no animation at all is removed immediately, which is what makes an unstyled component feel instant rather than delayed.",[25,702,704],{"id":703},"keeping-elements-mounted","Keeping elements mounted",[13,706,707,710,711,714,715,718,719,546,722,725],{},[20,708,709],{},"keepMounted"," keeps the element in the DOM while closed: hidden, but present, so its contents keep their scroll position and DOM state across open and close. Set it on the overlay's ",[20,712,713],{},"Portal"," part: ",[20,716,717],{},"\u003CPopover.Portal>"," for anchored overlays, ",[20,720,721],{},"\u003CDialog.Portal>",[20,723,724],{},"\u003CDrawer.Portal>"," for modal ones.",[60,727,730],{"language":728,"meta":729,"class":278},"vue","title=\"Keep the popup mounted\"",[20,731,733,81,745,81,762,81,772,81,787,81,796,81,805],{"class":732},"language-vue",[69,734,735,738,742],{"class":71,"style":72},[69,736,737],{"style":79},"\u003C",[69,739,741],{"style":740},"color:#22863A;--shiki-dark:#85E89D","template",[69,743,744],{"style":79},">",[69,746,747,750,753,756,760],{"class":71,"style":72},[69,748,749],{"style":79},"  \u003C",[69,751,752],{"style":740},"Popover.Portal",[69,754,755],{"style":75}," ",[69,757,759],{"style":75,"class":758},[628],"keep-mounted",[69,761,744],{"style":79},[69,763,764,767,770],{"class":71,"style":72},[69,765,766],{"style":79},"    \u003C",[69,768,769],{"style":740},"Popover.Positioner",[69,771,744],{"style":79},[69,773,774,777,780,783,785],{"class":71,"style":72},[69,775,776],{"style":79},"      \u003C",[69,778,779],{"style":740},"Popover.Popup",[69,781,782],{"style":79},">...\u003C\u002F",[69,784,779],{"style":740},[69,786,744],{"style":79},[69,788,789,792,794],{"class":71,"style":72},[69,790,791],{"style":79},"    \u003C\u002F",[69,793,769],{"style":740},[69,795,744],{"style":79},[69,797,798,801,803],{"class":71,"style":72},[69,799,800],{"style":79},"  \u003C\u002F",[69,802,752],{"style":740},[69,804,744],{"style":79},[69,806,807,810,812],{"class":71,"style":72},[69,808,809],{"style":79},"\u003C\u002F",[69,811,741],{"style":740},[69,813,744],{"style":79},[60,815,817],{"language":728,"meta":816,"class":278},"title=\"Keep a dialog mounted\"",[20,818,819,81,827,81,841,81,854,81,862],{"class":732},[69,820,821,823,825],{"class":71,"style":72},[69,822,737],{"style":79},[69,824,741],{"style":740},[69,826,744],{"style":79},[69,828,829,831,834,836,839],{"class":71,"style":72},[69,830,749],{"style":79},[69,832,833],{"style":740},"Dialog.Portal",[69,835,755],{"style":75},[69,837,759],{"style":75,"class":838},[628],[69,840,744],{"style":79},[69,842,843,845,848,850,852],{"class":71,"style":72},[69,844,766],{"style":79},[69,846,847],{"style":740},"Dialog.Popup",[69,849,782],{"style":79},[69,851,847],{"style":740},[69,853,744],{"style":79},[69,855,856,858,860],{"class":71,"style":72},[69,857,800],{"style":79},[69,859,833],{"style":740},[69,861,744],{"style":79},[69,863,864,866,868],{"class":71,"style":72},[69,865,809],{"style":79},[69,867,741],{"style":740},[69,869,744],{"style":79},[13,871,872,873,875],{},"Collapsible and Accordion panels take ",[20,874,709],{}," directly on the panel part:",[60,877,879],{"language":728,"meta":878,"class":278},"title=\"Keep panel contents mounted\"",[20,880,881,81,889,81,907],{"class":732},[69,882,883,885,887],{"class":71,"style":72},[69,884,737],{"style":79},[69,886,741],{"style":740},[69,888,744],{"style":79},[69,890,891,893,896,898,901,903,905],{"class":71,"style":72},[69,892,749],{"style":79},[69,894,895],{"style":740},"Collapsible.Panel",[69,897,755],{"style":75},[69,899,759],{"style":75,"class":900},[628],[69,902,782],{"style":79},[69,904,895],{"style":740},[69,906,744],{"style":79},[69,908,909,911,913],{"class":71,"style":72},[69,910,809],{"style":79},[69,912,741],{"style":740},[69,914,744],{"style":79},[25,916,918],{"id":917},"javascript-animations","JavaScript animations",[13,920,921,922,925,926,929,930,933],{},"For motion CSS can't reach — physics-based springs, gesture-linked timelines, an imperative library — animate the popup element yourself from a template ref. A part renders one element, so a ",[20,923,924],{},"ref"," on the part resolves to a component instance whose ",[20,927,928],{},"$el"," is that element, which is exactly where the library looks for animations. Watch ",[20,931,932],{},"open"," and one watcher plays both directions:",[60,935,937],{"language":728,"meta":936,"class":64},"title=\"Animate from a watcher\"",[20,938,939,81,951,81,965,81,977,81,989,81,991,81,1013,81,1032,81,1034,81,1053,81,1066,81,1083,81,1127,81,1132,81,1140,81,1142,81,1150,81,1168,81,1182,81,1195,81,1203,81,1230,81,1239,81,1247,81,1255],{"class":732},[69,940,941,943,946,949],{"class":71,"style":72},[69,942,737],{"style":79},[69,944,945],{"style":740},"script",[69,947,948],{"style":75}," setup",[69,950,744],{"style":79},[69,952,953,956,959,961],{"class":71,"style":72},[69,954,955],{"style":109},"import",[69,957,958],{"style":79}," { shallowRef, useTemplateRef, watch } ",[69,960,45],{"style":109},[69,962,964],{"style":963},"color:#032F62;--shiki-dark:#9ECBFF"," 'vue'",[69,966,967,969,972,974],{"class":71,"style":72},[69,968,955],{"style":109},[69,970,971],{"style":79}," { Popover } ",[69,973,45],{"style":109},[69,975,976],{"style":963}," '@shardsui\u002Fvue\u002Fpopover'",[69,978,979,981,984,986],{"class":71,"style":72},[69,980,955],{"style":109},[69,982,983],{"style":79}," { animate } ",[69,985,45],{"style":109},[69,987,988],{"style":963}," 'motion'",[69,990],{"class":71,"style":72},[69,992,993,996,999,1002,1005,1007,1010],{"class":71,"style":72},[69,994,995],{"style":109},"const",[69,997,998],{"style":86}," open",[69,1000,1001],{"style":109}," =",[69,1003,1004],{"style":75}," shallowRef",[69,1006,138],{"style":79},[69,1008,1009],{"style":86},"false",[69,1011,1012],{"style":79},")",[69,1014,1015,1017,1020,1022,1025,1027,1030],{"class":71,"style":72},[69,1016,995],{"style":109},[69,1018,1019],{"style":86}," popup",[69,1021,1001],{"style":109},[69,1023,1024],{"style":75}," useTemplateRef",[69,1026,138],{"style":79},[69,1028,1029],{"style":963},"'popup'",[69,1031,1012],{"style":79},[69,1033],{"class":71,"style":72},[69,1035,1036,1039,1042,1045,1048,1051],{"class":71,"style":72},[69,1037,1038],{"style":75},"watch",[69,1040,1041],{"style":79},"(open, (",[69,1043,1044],{"style":141},"isOpen",[69,1046,1047],{"style":79},") ",[69,1049,1050],{"style":109},"=>",[69,1052,80],{"style":79},[69,1054,1055,1058,1061,1063],{"class":71,"style":72},[69,1056,1057],{"style":109},"  const",[69,1059,1060],{"style":86}," node",[69,1062,1001],{"style":109},[69,1064,1065],{"style":79}," popup.value?.$el",[69,1067,1068,1071,1074,1077,1080],{"class":71,"style":72},[69,1069,1070],{"style":109},"  if",[69,1072,1073],{"style":79}," (",[69,1075,1076],{"style":109},"!",[69,1078,1079],{"style":79},"node) ",[69,1081,1082],{"style":109},"return",[69,1084,1085,1088,1091,1094,1097,1099,1102,1104,1107,1109,1111,1113,1115,1118,1121,1124],{"class":71,"style":72},[69,1086,1087],{"style":75},"  animate",[69,1089,1090],{"style":79},"(node, isOpen ",[69,1092,1093],{"style":109},"?",[69,1095,1096],{"style":79}," { opacity: ",[69,1098,106],{"style":86},[69,1100,1101],{"style":79},", scale: ",[69,1103,106],{"style":86},[69,1105,1106],{"style":79}," } ",[69,1108,153],{"style":109},[69,1110,1096],{"style":79},[69,1112,215],{"style":86},[69,1114,1101],{"style":79},[69,1116,1117],{"style":86},"0.8",[69,1119,1120],{"style":79}," }, { duration: ",[69,1122,1123],{"style":86},"0.2",[69,1125,1126],{"style":79}," })",[69,1128,1129],{"class":71,"style":72},[69,1130,1131],{"style":79},"})",[69,1133,1134,1136,1138],{"class":71,"style":72},[69,1135,809],{"style":79},[69,1137,945],{"style":740},[69,1139,744],{"style":79},[69,1141],{"class":71,"style":72},[69,1143,1144,1146,1148],{"class":71,"style":72},[69,1145,737],{"style":79},[69,1147,741],{"style":740},[69,1149,744],{"style":79},[69,1151,1152,1154,1157,1160,1163,1166],{"class":71,"style":72},[69,1153,749],{"style":79},[69,1155,1156],{"style":740},"Popover.Root",[69,1158,1159],{"style":75}," v-model:open",[69,1161,1162],{"style":79},"=",[69,1164,1165],{"style":963},"\"open\"",[69,1167,744],{"style":79},[69,1169,1170,1172,1175,1178,1180],{"class":71,"style":72},[69,1171,766],{"style":79},[69,1173,1174],{"style":740},"Popover.Trigger",[69,1176,1177],{"style":79},">Trigger\u003C\u002F",[69,1179,1174],{"style":740},[69,1181,744],{"style":79},[69,1183,1184,1186,1188,1190,1193],{"class":71,"style":72},[69,1185,766],{"style":79},[69,1187,752],{"style":740},[69,1189,755],{"style":75},[69,1191,759],{"style":75,"class":1192},[628],[69,1194,744],{"style":79},[69,1196,1197,1199,1201],{"class":71,"style":72},[69,1198,776],{"style":79},[69,1200,769],{"style":740},[69,1202,744],{"style":79},[69,1204,1206,1209,1211,1213,1216,1219,1223,1226,1228],{"class":1205,"style":72},[71,184],[69,1207,1208],{"style":79},"        \u003C",[69,1210,779],{"style":740},[69,1212,755],{"style":75},[69,1214,924],{"style":75,"class":1215},[628],[69,1217,1162],{"style":79,"class":1218},[628],[69,1220,1222],{"style":963,"class":1221},[628],"\"popup\"",[69,1224,1225],{"style":79},">Popup\u003C\u002F",[69,1227,779],{"style":740},[69,1229,744],{"style":79},[69,1231,1232,1235,1237],{"class":71,"style":72},[69,1233,1234],{"style":79},"      \u003C\u002F",[69,1236,769],{"style":740},[69,1238,744],{"style":79},[69,1240,1241,1243,1245],{"class":71,"style":72},[69,1242,791],{"style":79},[69,1244,752],{"style":740},[69,1246,744],{"style":79},[69,1248,1249,1251,1253],{"class":71,"style":72},[69,1250,800],{"style":79},[69,1252,1156],{"style":740},[69,1254,744],{"style":79},[69,1256,1257,1259,1261],{"class":71,"style":72},[69,1258,809],{"style":79},[69,1260,741],{"style":740},[69,1262,744],{"style":79},[13,1264,1265,1267,1268,1270],{},[20,1266,709],{}," is required here: the popup survives the close, so the next open animates from the values the exit left behind. A freshly mounted element sits at its resting style with nothing to animate from, so the very first open has no enter animation. Use ",[20,1269,40],{}," if you need one.",[13,1272,1273,1274,1277,1278,1281,1282,1284,1285,1288],{},"Not every library reports its work to ",[20,1275,1276],{},"getAnimations()",". Motion registers ",[20,1279,1280],{},"opacity"," animations, so a part that only translates — a drawer that slides, say — can have nothing to report at the moment of removal, and vanishes without its exit. Animate ",[20,1283,1280],{}," as well, to a barely-perceptible value like ",[20,1286,1287],{},"0.9999",", so the exit registers.",[13,1290,1291,1292,1295],{},"Vue's ",[20,1293,1294],{},"\u003CTransition>"," component is the one thing that can't work here. It has to own the mount and unmount of the element it wraps, but a part decides for itself when its element leaves, and an animation on a child of the popup is invisible to the check above, so the popup is hidden while the leave transition is still playing. Animate the part's element from a watcher instead.",[25,1297,1299],{"id":1298},"instant-changes","Instant changes",[13,1301,1302,1303,1306],{},"Some changes shouldn't animate at all: a tooltip opened by keyboard focus, a popup dismissed with Escape, a menubar handing its menu from one trigger to the next. Those get ",[20,1304,1305],{},"[data-instant]",". The library only marks them. Cancelling the motion is yours to do:",[60,1308,1309],{"language":62,"meta":63,"class":278},[20,1310,1311,81,1322,81,1336],{"class":67},[69,1312,1313,1315,1317,1320],{"class":71,"style":72},[69,1314,76],{"style":75},[69,1316,456],{"style":79},[69,1318,1319],{"style":75},"data-instant",[69,1321,204],{"style":79},[69,1323,1324,1327,1329,1331,1334],{"class":71,"style":72},[69,1325,1326],{"style":86},"  transition-duration",[69,1328,90],{"style":79},[69,1330,215],{"style":86},[69,1332,1333],{"style":109},"s",[69,1335,96],{"style":79},[69,1337,1338],{"class":71,"style":72},[69,1339,246],{"style":79},[25,1341,1343],{"id":1342},"respect-reduced-motion","Respect reduced motion",[13,1345,1346,1347,1350],{},"Some people disable motion at the OS level. Honor that with the ",[20,1348,1349],{},"prefers-reduced-motion"," media query: author your resting styles with no motion, then layer transitions on only when motion is welcome.",[60,1352,1353],{"language":62,"meta":63,"class":278},[20,1354,1355,81,1361,81,1375,81,1377,81,1392,81,1399,81,1410,81,1421,81,1425,81,1427,81,1435,81,1443,81,1453,81,1467,81,1471],{"class":67},[69,1356,1357,1359],{"class":71,"style":72},[69,1358,76],{"style":75},[69,1360,80],{"style":79},[69,1362,1363,1365,1367,1369,1371,1373],{"class":71,"style":72},[69,1364,130],{"style":86},[69,1366,90],{"style":79},[69,1368,135],{"style":86},[69,1370,138],{"style":79},[69,1372,142],{"style":141},[69,1374,145],{"style":79},[69,1376],{"class":71,"style":72},[69,1378,1379,1382,1385,1387,1389],{"class":71,"style":72},[69,1380,1381],{"style":79},"  @",[69,1383,1384],{"style":86},"media",[69,1386,1073],{"style":79},[69,1388,1349],{"style":86},[69,1390,1391],{"style":79},": no-preference) {",[69,1393,1394,1397],{"class":71,"style":72},[69,1395,1396],{"style":86},"    transition",[69,1398,153],{"style":79},[69,1400,1401,1404,1406,1408],{"class":71,"style":72},[69,1402,1403],{"style":79},"      transform ",[69,1405,161],{"style":86},[69,1407,164],{"style":109},[69,1409,167],{"style":79},[69,1411,1412,1415,1417,1419],{"class":71,"style":72},[69,1413,1414],{"style":79},"      opacity ",[69,1416,161],{"style":86},[69,1418,164],{"style":109},[69,1420,96],{"style":79},[69,1422,1423],{"class":71,"style":72},[69,1424,241],{"style":79},[69,1426],{"class":71,"style":72},[69,1428,1429,1431,1433],{"class":71,"style":72},[69,1430,187],{"style":79},[69,1432,190],{"style":75},[69,1434,193],{"style":79},[69,1436,1437,1439,1441],{"class":71,"style":72},[69,1438,187],{"style":79},[69,1440,201],{"style":75},[69,1442,204],{"style":79},[69,1444,1445,1447,1449,1451],{"class":71,"style":72},[69,1446,210],{"style":86},[69,1448,90],{"style":79},[69,1450,215],{"style":86},[69,1452,96],{"style":79},[69,1454,1455,1457,1459,1461,1463,1465],{"class":71,"style":72},[69,1456,223],{"style":86},[69,1458,90],{"style":79},[69,1460,228],{"style":86},[69,1462,138],{"style":79},[69,1464,233],{"style":86},[69,1466,145],{"style":79},[69,1468,1469],{"class":71,"style":72},[69,1470,241],{"style":79},[69,1472,1473],{"class":71,"style":72},[69,1474,246],{"style":79},[13,1476,1477],{},"With no transition the element snaps between its extremes and its resting state, and there's nothing to wait on, so unmount stays immediate. Keep the opacity or a color shift if you still want a fade; strip only the transforms that move things across the screen.",1789390078434]