[{"data":1,"prerenderedAt":2728},["ShallowReactive",2],{"navigation_docs":3,"-guide-positioning-animations-and-transitions":226,"-guide-positioning-animations-and-transitions-surround":2723},[4,90],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":28},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,29,51,68],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":28},"Getting Started","i-lucide-rocket","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",[16,20,24],{"title":17,"path":18,"stem":19},"Introduction","\u002Fguide\u002Fgetting-started\u002Fintroduction","1.guide\u002F1.getting-started\u002F1.introduction",{"title":21,"path":22,"stem":23},"First Tooltip","\u002Fguide\u002Fgetting-started\u002Ffirst-tooltip","1.guide\u002F1.getting-started\u002F2.first-tooltip",{"title":25,"path":26,"stem":27},"First Menu","\u002Fguide\u002Fgetting-started\u002Ffirst-menu","1.guide\u002F1.getting-started\u002F3.first-menu",false,{"title":30,"icon":31,"path":32,"stem":33,"children":34,"page":28},"Core Concepts","i-lucide-boxes","\u002Fguide\u002Fcore-concepts","1.guide\u002F2.core-concepts",[35,39,43,47],{"title":36,"path":37,"stem":38},"Floating node","\u002Fguide\u002Fcore-concepts\u002Ffloating-node","1.guide\u002F2.core-concepts\u002F1.floating-node",{"title":40,"path":41,"stem":42},"Positioning","\u002Fguide\u002Fcore-concepts\u002Fpositioning","1.guide\u002F2.core-concepts\u002F2.positioning",{"title":44,"path":45,"stem":46},"Interaction model","\u002Fguide\u002Fcore-concepts\u002Finteraction-model","1.guide\u002F2.core-concepts\u002F3.interaction-model",{"title":48,"path":49,"stem":50},"Hierarchy","\u002Fguide\u002Fcore-concepts\u002Fhierarchy","1.guide\u002F2.core-concepts\u002F4.hierarchy",{"title":40,"icon":52,"path":53,"stem":54,"children":55,"page":28},"i-lucide-crosshair","\u002Fguide\u002Fpositioning","1.guide\u002F3.positioning",[56,60,64],{"title":57,"path":58,"stem":59},"Middlewares","\u002Fguide\u002Fpositioning\u002Fmiddlewares","1.guide\u002F3.positioning\u002F1.middlewares",{"title":61,"path":62,"stem":63},"Virtual Anchors","\u002Fguide\u002Fpositioning\u002Fvirtual-anchors","1.guide\u002F3.positioning\u002F2.virtual-anchors",{"title":65,"path":66,"stem":67},"Animations and Transitions","\u002Fguide\u002Fpositioning\u002Fanimations-and-transitions","1.guide\u002F3.positioning\u002F3.animations-and-transitions",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":28},"Accessibility","i-lucide-person-standing","\u002Fguide\u002Faccessibility","1.guide\u002F4.accessibility",[74,78,82,86],{"title":75,"path":76,"stem":77},"ARIA & Semantics","\u002Fguide\u002Faccessibility\u002Faria-and-semantics","1.guide\u002F4.accessibility\u002F1.aria-and-semantics",{"title":79,"path":80,"stem":81},"Focus Models","\u002Fguide\u002Faccessibility\u002Ffocus-models","1.guide\u002F4.accessibility\u002F2.focus-models",{"title":83,"path":84,"stem":85},"Keyboard Navigation","\u002Fguide\u002Faccessibility\u002Fkeyboard-navigation","1.guide\u002F4.accessibility\u002F3.keyboard-navigation",{"title":87,"path":88,"stem":89},"Hover & Dismissal","\u002Fguide\u002Faccessibility\u002Fhover-and-dismissal","1.guide\u002F4.accessibility\u002F4.hover-and-dismissal",{"title":91,"icon":92,"path":93,"stem":94,"children":95},"API Reference","i-lucide-code-xml","\u002Fapi","2.api",[96,100,110,120,137,171,188],{"title":97,"path":93,"stem":98,"icon":99},"Overview","2.api\u002Findex","i-lucide-file-text",{"title":101,"icon":102,"path":103,"stem":104,"children":105,"page":28},"Reference","i-lucide-braces","\u002Fapi\u002Foverview","2.api\u002F1.overview",[106],{"title":107,"path":108,"stem":109},"Types","\u002Fapi\u002Foverview\u002Ftypes","2.api\u002F1.overview\u002F1.types",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":28},"Core","i-lucide-box","\u002Fapi\u002Fcore","2.api\u002F2.core",[116],{"title":117,"path":118,"stem":119},"useFloatingNode","\u002Fapi\u002Fcore\u002Fuse-floating-node","2.api\u002F2.core\u002F1.use-floating-node",{"title":40,"icon":121,"path":122,"stem":123,"children":124,"page":28},"i-lucide-move","\u002Fapi\u002Fpositioning","2.api\u002F3.positioning",[125,129,133],{"title":126,"path":127,"stem":128},"usePosition","\u002Fapi\u002Fpositioning\u002Fuse-position","2.api\u002F3.positioning\u002F1.use-position",{"title":130,"path":131,"stem":132},"useArrow","\u002Fapi\u002Fpositioning\u002Fuse-arrow","2.api\u002F3.positioning\u002F2.use-arrow",{"title":134,"path":135,"stem":136},"useClientPoint","\u002Fapi\u002Fpositioning\u002Fuse-client-point","2.api\u002F3.positioning\u002F3.use-client-point",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":28},"Interactions","i-lucide-mouse-pointer-click","\u002Fapi\u002Finteractions","2.api\u002F4.interactions",[143,147,151,155,159,163,167],{"title":144,"path":145,"stem":146},"useClick","\u002Fapi\u002Finteractions\u002Fuse-click","2.api\u002F4.interactions\u002F1.use-click",{"title":148,"path":149,"stem":150},"useHover","\u002Fapi\u002Finteractions\u002Fuse-hover","2.api\u002F4.interactions\u002F2.use-hover",{"title":152,"path":153,"stem":154},"useFocus","\u002Fapi\u002Finteractions\u002Fuse-focus","2.api\u002F4.interactions\u002F3.use-focus",{"title":156,"path":157,"stem":158},"useFocusTrap","\u002Fapi\u002Finteractions\u002Fuse-focus-trap","2.api\u002F4.interactions\u002F4.use-focus-trap",{"title":160,"path":161,"stem":162},"useOutsideClick","\u002Fapi\u002Finteractions\u002Fuse-outside-click","2.api\u002F4.interactions\u002F5.use-outside-click",{"title":164,"path":165,"stem":166},"useEscapeKey","\u002Fapi\u002Finteractions\u002Fuse-escape-key","2.api\u002F4.interactions\u002F6.use-escape-key",{"title":168,"path":169,"stem":170},"useRole","\u002Fapi\u002Finteractions\u002Fuse-role","2.api\u002F4.interactions\u002F7.use-role",{"title":83,"icon":172,"path":173,"stem":174,"children":175,"page":28},"i-lucide-keyboard","\u002Fapi\u002Fkeyboard-navigation","2.api\u002F5.keyboard-navigation",[176,180,184],{"title":177,"path":178,"stem":179},"useRovingFocus","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-roving-focus","2.api\u002F5.keyboard-navigation\u002F1.use-roving-focus",{"title":181,"path":182,"stem":183},"useAriaActivedescendant","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-aria-activedescendant","2.api\u002F5.keyboard-navigation\u002F2.use-aria-activedescendant",{"title":185,"path":186,"stem":187},"useTypeahead","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-typeahead","2.api\u002F5.keyboard-navigation\u002F3.use-typeahead",{"title":189,"icon":190,"path":191,"stem":192,"children":193,"page":28},"Middleware","i-lucide-blocks","\u002Fapi\u002Fmiddleware","2.api\u002F6.middleware",[194,198,202,206,210,214,218,222],{"title":195,"path":196,"stem":197},"offset","\u002Fapi\u002Fmiddleware\u002Foffset","2.api\u002F6.middleware\u002F1.offset",{"title":199,"path":200,"stem":201},"flip","\u002Fapi\u002Fmiddleware\u002Fflip","2.api\u002F6.middleware\u002F2.flip",{"title":203,"path":204,"stem":205},"shift","\u002Fapi\u002Fmiddleware\u002Fshift","2.api\u002F6.middleware\u002F3.shift",{"title":207,"path":208,"stem":209},"autoPlacement","\u002Fapi\u002Fmiddleware\u002Fautoplacement","2.api\u002F6.middleware\u002F4.autoplacement",{"title":211,"path":212,"stem":213},"size","\u002Fapi\u002Fmiddleware\u002Fsize","2.api\u002F6.middleware\u002F5.size",{"title":215,"path":216,"stem":217},"inline","\u002Fapi\u002Fmiddleware\u002Finline","2.api\u002F6.middleware\u002F6.inline",{"title":219,"path":220,"stem":221},"arrow","\u002Fapi\u002Fmiddleware\u002Farrow","2.api\u002F6.middleware\u002F7.arrow",{"title":223,"path":224,"stem":225},"hide","\u002Fapi\u002Fmiddleware\u002Fhide","2.api\u002F6.middleware\u002F8.hide",{"id":227,"title":65,"body":228,"description":2717,"extension":2718,"links":2719,"meta":2720,"navigation":451,"path":66,"seo":2721,"stem":67,"__hash__":2722},"docs\u002F1.guide\u002F3.positioning\u002F3.animations-and-transitions.md",{"type":229,"value":230,"toc":2701},"minimark",[231,244,260,272,277,285,295,298,333,337,340,343,1138,1147,1156,1173,1179,1198,1740,1766,1773,1791,1801,1825,1831,1836,2003,2007,2016,2662,2672,2676,2698],[232,233,234,235,239,240,243],"p",{},"Animating floating surfaces feels simple until you apply a CSS transition to them. If you add ",[236,237,238],"code",{},"transition: transform"," or a utility class like Tailwind's ",[236,241,242],{},"transition-all"," directly to a positioned element, it will fly in from the top-left corner of the screen when it mounts.",[232,245,246,247,251,252,255,256,259],{},"This happens because VFloat measures and positions the element ",[248,249,250],"em",{},"after"," it enters the DOM. If the element itself transitions ",[236,253,254],{},"transform",", the browser animates the jump from ",[236,257,258],{},"(0, 0)"," to its computed coordinates.",[232,261,262,263,267,268,271],{},"You do not need complex timing hacks to solve this. You just need to separate ",[264,265,266],"strong",{},"positioning"," from ",[264,269,270],{},"animation",".",[273,274,276],"h2",{"id":275},"the-core-rule","The core rule",[278,279,280],"blockquote",{},[232,281,282],{},[264,283,284],{},"Never transition the property VFloat uses to position the element.",[232,286,287,288,291,292,294],{},"By default, VFloat writes CSS ",[236,289,290],{},"transform: translate(x, y)"," to position the panel. If you transition ",[236,293,254],{}," on that same element, positioning calculations and CSS animations fight over the same property.",[232,296,297],{},"There are two clean ways to animate floating surfaces:",[299,300,301,312],"ol",{},[302,303,304,307,308,311],"li",{},[264,305,306],{},"The Nested Wrapper Pattern (Recommended):"," Put the positioning ref on an outer wrapper, and apply your Vue ",[236,309,310],{},"\u003CTransition>"," or CSS animation to an inner child element.",[302,313,314,321,322,325,326,329,330,332],{},[264,315,316,317,320],{},"The ",[236,318,319],{},"transform: false"," Pattern:"," Configure VFloat to position with ",[236,323,324],{},"top"," and ",[236,327,328],{},"left",", leaving ",[236,331,254],{}," completely free for scale and slide animations on a single element.",[273,334,336],{"id":335},"pattern-1-the-nested-wrapper-pattern-recommended","Pattern 1: The Nested Wrapper Pattern (Recommended)",[232,338,339],{},"This is the standard architecture used by headless UI libraries.",[232,341,342],{},"The outer wrapper receives the positioning styles from VFloat and snaps to the anchor without transitions. An inner container handles the enter and exit animations (such as scale, opacity, or slide).",[344,345,350],"pre",{"className":346,"code":347,"language":348,"meta":349,"style":349},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst open = ref(false);\n\nconst node = useFloatingNode({\n  anchorEl,\n  floatingEl,\n  open,\n});\n\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\" @click=\"open = !open\">Toggle Menu\u003C\u002Fbutton>\n\n  \u003C!-- Vue Transition keeps the wrapper mounted while the leave animation finishes -->\n  \u003CTransition name=\"pop\" :duration=\"150\">\n    \u003C!-- Outer wrapper: receives positioning coordinates; NO transitions here -->\n    \u003Cdiv v-if=\"open\" ref=\"floatingEl\">\n      \u003C!-- Inner element: handles scale, fade, and slide transitions -->\n      \u003Cdiv class=\"panel\">\n        \u003Cp>Menu content\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FTransition>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n\u002F* Target the inner element for animations *\u002F\n.pop-enter-active .panel,\n.pop-leave-active .panel {\n  transition:\n    opacity 150ms ease,\n    transform 150ms ease;\n}\n\n.pop-enter-from .panel,\n.pop-leave-to .panel {\n  opacity: 0;\n  transform: scale(0.95);\n}\n\u003C\u002Fstyle>\n","vue","",[236,351,352,387,417,446,453,493,523,545,550,567,576,584,592,602,607,620,638,648,662,675,695,701,710,720,725,735,789,794,801,838,844,878,884,906,925,935,945,955,964,969,982,988,1003,1017,1027,1041,1053,1059,1064,1078,1092,1105,1124,1129],{"__ignoreMap":349},[353,354,357,361,365,369,372,375,378,382,384],"span",{"class":355,"line":356},"line",1,[353,358,360],{"class":359},"sMK4o","\u003C",[353,362,364],{"class":363},"swJcz","script",[353,366,368],{"class":367},"spNyl"," setup",[353,370,371],{"class":367}," lang",[353,373,374],{"class":359},"=",[353,376,377],{"class":359},"\"",[353,379,381],{"class":380},"sfazB","ts",[353,383,377],{"class":359},[353,385,386],{"class":359},">\n",[353,388,390,394,397,401,404,407,410,412,414],{"class":355,"line":389},2,[353,391,393],{"class":392},"s7zQu","import",[353,395,396],{"class":359}," {",[353,398,400],{"class":399},"sTEyZ"," ref",[353,402,403],{"class":359}," }",[353,405,406],{"class":392}," from",[353,408,409],{"class":359}," \"",[353,411,348],{"class":380},[353,413,377],{"class":359},[353,415,416],{"class":359},";\n",[353,418,420,422,424,427,430,433,435,437,439,442,444],{"class":355,"line":419},3,[353,421,393],{"class":392},[353,423,396],{"class":359},[353,425,426],{"class":399}," useFloatingNode",[353,428,429],{"class":359},",",[353,431,432],{"class":399}," usePosition",[353,434,403],{"class":359},[353,436,406],{"class":392},[353,438,409],{"class":359},[353,440,441],{"class":380},"v-float",[353,443,377],{"class":359},[353,445,416],{"class":359},[353,447,449],{"class":355,"line":448},4,[353,450,452],{"emptyLinePlaceholder":451},true,"\n",[353,454,456,459,462,464,467,469,473,476,479,482,485,488,491],{"class":355,"line":455},5,[353,457,458],{"class":367},"const",[353,460,461],{"class":399}," anchorEl ",[353,463,374],{"class":359},[353,465,400],{"class":466},"s2Zo4",[353,468,360],{"class":359},[353,470,472],{"class":471},"sBMFI","HTMLElement",[353,474,475],{"class":359}," |",[353,477,478],{"class":471}," null",[353,480,481],{"class":359},">",[353,483,484],{"class":399},"(",[353,486,487],{"class":359},"null",[353,489,490],{"class":399},")",[353,492,416],{"class":359},[353,494,496,498,501,503,505,507,509,511,513,515,517,519,521],{"class":355,"line":495},6,[353,497,458],{"class":367},[353,499,500],{"class":399}," floatingEl ",[353,502,374],{"class":359},[353,504,400],{"class":466},[353,506,360],{"class":359},[353,508,472],{"class":471},[353,510,475],{"class":359},[353,512,478],{"class":471},[353,514,481],{"class":359},[353,516,484],{"class":399},[353,518,487],{"class":359},[353,520,490],{"class":399},[353,522,416],{"class":359},[353,524,526,528,531,533,535,537,541,543],{"class":355,"line":525},7,[353,527,458],{"class":367},[353,529,530],{"class":399}," open ",[353,532,374],{"class":359},[353,534,400],{"class":466},[353,536,484],{"class":399},[353,538,540],{"class":539},"sfNiH","false",[353,542,490],{"class":399},[353,544,416],{"class":359},[353,546,548],{"class":355,"line":547},8,[353,549,452],{"emptyLinePlaceholder":451},[353,551,553,555,558,560,562,564],{"class":355,"line":552},9,[353,554,458],{"class":367},[353,556,557],{"class":399}," node ",[353,559,374],{"class":359},[353,561,426],{"class":466},[353,563,484],{"class":399},[353,565,566],{"class":359},"{\n",[353,568,570,573],{"class":355,"line":569},10,[353,571,572],{"class":399},"  anchorEl",[353,574,575],{"class":359},",\n",[353,577,579,582],{"class":355,"line":578},11,[353,580,581],{"class":399},"  floatingEl",[353,583,575],{"class":359},[353,585,587,590],{"class":355,"line":586},12,[353,588,589],{"class":399},"  open",[353,591,575],{"class":359},[353,593,595,598,600],{"class":355,"line":594},13,[353,596,597],{"class":359},"}",[353,599,490],{"class":399},[353,601,416],{"class":359},[353,603,605],{"class":355,"line":604},14,[353,606,452],{"emptyLinePlaceholder":451},[353,608,610,612,615,617],{"class":355,"line":609},15,[353,611,126],{"class":466},[353,613,614],{"class":399},"(node",[353,616,429],{"class":359},[353,618,619],{"class":359}," {\n",[353,621,623,626,629,631,634,636],{"class":355,"line":622},16,[353,624,625],{"class":363},"  placement",[353,627,628],{"class":359},":",[353,630,409],{"class":359},[353,632,633],{"class":380},"bottom-start",[353,635,377],{"class":359},[353,637,575],{"class":359},[353,639,641,644,646],{"class":355,"line":640},17,[353,642,643],{"class":363},"  middlewares",[353,645,628],{"class":359},[353,647,619],{"class":359},[353,649,651,654,656,660],{"class":355,"line":650},18,[353,652,653],{"class":363},"    offset",[353,655,628],{"class":359},[353,657,659],{"class":658},"sbssI"," 8",[353,661,575],{"class":359},[353,663,665,668,670,673],{"class":355,"line":664},19,[353,666,667],{"class":363},"    flip",[353,669,628],{"class":359},[353,671,672],{"class":539}," true",[353,674,575],{"class":359},[353,676,678,681,683,685,688,690,692],{"class":355,"line":677},20,[353,679,680],{"class":363},"    shift",[353,682,628],{"class":359},[353,684,396],{"class":359},[353,686,687],{"class":363}," padding",[353,689,628],{"class":359},[353,691,659],{"class":658},[353,693,694],{"class":359}," },\n",[353,696,698],{"class":355,"line":697},21,[353,699,700],{"class":359},"  },\n",[353,702,704,706,708],{"class":355,"line":703},22,[353,705,597],{"class":359},[353,707,490],{"class":399},[353,709,416],{"class":359},[353,711,713,716,718],{"class":355,"line":712},23,[353,714,715],{"class":359},"\u003C\u002F",[353,717,364],{"class":363},[353,719,386],{"class":359},[353,721,723],{"class":355,"line":722},24,[353,724,452],{"emptyLinePlaceholder":451},[353,726,728,730,733],{"class":355,"line":727},25,[353,729,360],{"class":359},[353,731,732],{"class":363},"template",[353,734,386],{"class":359},[353,736,738,741,744,746,748,750,753,755,758,760,762,764,766,769,771,773,776,778,780,783,785,787],{"class":355,"line":737},26,[353,739,740],{"class":359},"  \u003C",[353,742,743],{"class":363},"button",[353,745,400],{"class":367},[353,747,374],{"class":359},[353,749,377],{"class":359},[353,751,752],{"class":380},"anchorEl",[353,754,377],{"class":359},[353,756,757],{"class":367}," type",[353,759,374],{"class":359},[353,761,377],{"class":359},[353,763,743],{"class":380},[353,765,377],{"class":359},[353,767,768],{"class":367}," @click",[353,770,374],{"class":359},[353,772,377],{"class":359},[353,774,775],{"class":380},"open = !open",[353,777,377],{"class":359},[353,779,481],{"class":359},[353,781,782],{"class":399},"Toggle Menu",[353,784,715],{"class":359},[353,786,743],{"class":363},[353,788,386],{"class":359},[353,790,792],{"class":355,"line":791},27,[353,793,452],{"emptyLinePlaceholder":451},[353,795,797],{"class":355,"line":796},28,[353,798,800],{"class":799},"sHwdD","  \u003C!-- Vue Transition keeps the wrapper mounted while the leave animation finishes -->\n",[353,802,804,806,809,812,814,816,819,821,824,827,829,831,834,836],{"class":355,"line":803},29,[353,805,740],{"class":359},[353,807,808],{"class":363},"Transition",[353,810,811],{"class":367}," name",[353,813,374],{"class":359},[353,815,377],{"class":359},[353,817,818],{"class":380},"pop",[353,820,377],{"class":359},[353,822,823],{"class":359}," :",[353,825,826],{"class":367},"duration",[353,828,374],{"class":359},[353,830,377],{"class":359},[353,832,833],{"class":658},"150",[353,835,377],{"class":359},[353,837,386],{"class":359},[353,839,841],{"class":355,"line":840},30,[353,842,843],{"class":799},"    \u003C!-- Outer wrapper: receives positioning coordinates; NO transitions here -->\n",[353,845,847,850,853,856,858,860,863,865,867,869,871,874,876],{"class":355,"line":846},31,[353,848,849],{"class":359},"    \u003C",[353,851,852],{"class":363},"div",[353,854,855],{"class":367}," v-if",[353,857,374],{"class":359},[353,859,377],{"class":359},[353,861,862],{"class":380},"open",[353,864,377],{"class":359},[353,866,400],{"class":367},[353,868,374],{"class":359},[353,870,377],{"class":359},[353,872,873],{"class":380},"floatingEl",[353,875,377],{"class":359},[353,877,386],{"class":359},[353,879,881],{"class":355,"line":880},32,[353,882,883],{"class":799},"      \u003C!-- Inner element: handles scale, fade, and slide transitions -->\n",[353,885,887,890,892,895,897,899,902,904],{"class":355,"line":886},33,[353,888,889],{"class":359},"      \u003C",[353,891,852],{"class":363},[353,893,894],{"class":367}," class",[353,896,374],{"class":359},[353,898,377],{"class":359},[353,900,901],{"class":380},"panel",[353,903,377],{"class":359},[353,905,386],{"class":359},[353,907,909,912,914,916,919,921,923],{"class":355,"line":908},34,[353,910,911],{"class":359},"        \u003C",[353,913,232],{"class":363},[353,915,481],{"class":359},[353,917,918],{"class":399},"Menu content",[353,920,715],{"class":359},[353,922,232],{"class":363},[353,924,386],{"class":359},[353,926,928,931,933],{"class":355,"line":927},35,[353,929,930],{"class":359},"      \u003C\u002F",[353,932,852],{"class":363},[353,934,386],{"class":359},[353,936,938,941,943],{"class":355,"line":937},36,[353,939,940],{"class":359},"    \u003C\u002F",[353,942,852],{"class":363},[353,944,386],{"class":359},[353,946,948,951,953],{"class":355,"line":947},37,[353,949,950],{"class":359},"  \u003C\u002F",[353,952,808],{"class":363},[353,954,386],{"class":359},[353,956,958,960,962],{"class":355,"line":957},38,[353,959,715],{"class":359},[353,961,732],{"class":363},[353,963,386],{"class":359},[353,965,967],{"class":355,"line":966},39,[353,968,452],{"emptyLinePlaceholder":451},[353,970,972,974,977,980],{"class":355,"line":971},40,[353,973,360],{"class":359},[353,975,976],{"class":363},"style",[353,978,979],{"class":367}," scoped",[353,981,386],{"class":359},[353,983,985],{"class":355,"line":984},41,[353,986,987],{"class":799},"\u002F* Target the inner element for animations *\u002F\n",[353,989,991,993,996,999,1001],{"class":355,"line":990},42,[353,992,271],{"class":359},[353,994,995],{"class":471},"pop-enter-active",[353,997,998],{"class":359}," .",[353,1000,901],{"class":471},[353,1002,575],{"class":359},[353,1004,1006,1008,1011,1013,1015],{"class":355,"line":1005},43,[353,1007,271],{"class":359},[353,1009,1010],{"class":471},"pop-leave-active",[353,1012,998],{"class":359},[353,1014,901],{"class":471},[353,1016,619],{"class":359},[353,1018,1020,1024],{"class":355,"line":1019},44,[353,1021,1023],{"class":1022},"sqsOY","  transition",[353,1025,1026],{"class":359},":\n",[353,1028,1030,1033,1036,1039],{"class":355,"line":1029},45,[353,1031,1032],{"class":399},"    opacity ",[353,1034,1035],{"class":658},"150ms",[353,1037,1038],{"class":399}," ease",[353,1040,575],{"class":359},[353,1042,1044,1047,1049,1051],{"class":355,"line":1043},46,[353,1045,1046],{"class":399},"    transform ",[353,1048,1035],{"class":658},[353,1050,1038],{"class":399},[353,1052,416],{"class":359},[353,1054,1056],{"class":355,"line":1055},47,[353,1057,1058],{"class":359},"}\n",[353,1060,1062],{"class":355,"line":1061},48,[353,1063,452],{"emptyLinePlaceholder":451},[353,1065,1067,1069,1072,1074,1076],{"class":355,"line":1066},49,[353,1068,271],{"class":359},[353,1070,1071],{"class":471},"pop-enter-from",[353,1073,998],{"class":359},[353,1075,901],{"class":471},[353,1077,575],{"class":359},[353,1079,1081,1083,1086,1088,1090],{"class":355,"line":1080},50,[353,1082,271],{"class":359},[353,1084,1085],{"class":471},"pop-leave-to",[353,1087,998],{"class":359},[353,1089,901],{"class":471},[353,1091,619],{"class":359},[353,1093,1095,1098,1100,1103],{"class":355,"line":1094},51,[353,1096,1097],{"class":1022},"  opacity",[353,1099,628],{"class":359},[353,1101,1102],{"class":658}," 0",[353,1104,416],{"class":359},[353,1106,1108,1111,1113,1116,1118,1121],{"class":355,"line":1107},52,[353,1109,1110],{"class":1022},"  transform",[353,1112,628],{"class":359},[353,1114,1115],{"class":466}," scale",[353,1117,484],{"class":359},[353,1119,1120],{"class":658},"0.95",[353,1122,1123],{"class":359},");\n",[353,1125,1127],{"class":355,"line":1126},53,[353,1128,1058],{"class":359},[353,1130,1132,1134,1136],{"class":355,"line":1131},54,[353,1133,715],{"class":359},[353,1135,976],{"class":363},[353,1137,386],{"class":359},[1139,1140,1142,1143,1146],"h3",{"id":1141},"why-duration-is-required","Why ",[236,1144,1145],{},":duration"," is required",[232,1148,1149,1150,1153,1154,271],{},"Notice ",[236,1151,1152],{},":duration=\"150\""," on ",[236,1155,310],{},[232,1157,1158,1159,1161,1162,1165,1166,1169,1170,1172],{},"Because ",[236,1160,310],{}," surrounds an outer ",[236,1163,1164],{},"\u003Cdiv>"," that has no transition of its own, Vue needs to know when the nested ",[236,1167,1168],{},".panel"," transition finishes before unmounting the outer wrapper from the DOM. Without ",[236,1171,1145],{},", Vue removes the element immediately on close, skipping the exit animation.",[273,1174,1176,1177],{"id":1175},"pattern-2-single-element-with-transform-false","Pattern 2: Single element with ",[236,1178,319],{},[232,1180,1181,1182,1184,1185,1190,1191,325,1193,1195,1196,628],{},"If you want to avoid an extra wrapper ",[236,1183,1164],{}," and animate a single element directly, tell ",[1186,1187,1188],"a",{"href":127},[236,1189,126],{}," to position with ",[236,1192,324],{},[236,1194,328],{}," instead of ",[236,1197,254],{},[344,1199,1201],{"className":346,"code":1200,"language":348,"meta":349,"style":349},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst open = ref(false);\n\nconst node = useFloatingNode({ anchorEl, floatingEl, open });\n\nusePosition(node, {\n  placement: \"bottom-start\",\n  transform: false, \u002F\u002F Positions with top\u002Fleft instead of CSS transform\n  middlewares: {\n    offset: 8,\n    flip: true,\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\" @click=\"open = !open\">Toggle Menu\u003C\u002Fbutton>\n\n  \u003CTransition name=\"fade-scale\">\n    \u003Cdiv v-if=\"open\" ref=\"floatingEl\" class=\"panel\">Menu content\u003C\u002Fdiv>\n  \u003C\u002FTransition>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.fade-scale-enter-active,\n.fade-scale-leave-active {\n  \u002F* Safe: transform and opacity do not conflict with top and left *\u002F\n  transition:\n    opacity 150ms ease,\n    transform 150ms ease;\n}\n\n.fade-scale-enter-from,\n.fade-scale-leave-to {\n  opacity: 0;\n  transform: scale(0.95);\n}\n\u003C\u002Fstyle>\n",[236,1202,1203,1223,1243,1267,1271,1299,1327,1345,1349,1382,1386,1396,1410,1424,1432,1442,1452,1456,1464,1472,1476,1484,1530,1534,1553,1599,1607,1615,1619,1629,1638,1647,1652,1658,1668,1678,1682,1686,1695,1704,1714,1728,1732],{"__ignoreMap":349},[353,1204,1205,1207,1209,1211,1213,1215,1217,1219,1221],{"class":355,"line":356},[353,1206,360],{"class":359},[353,1208,364],{"class":363},[353,1210,368],{"class":367},[353,1212,371],{"class":367},[353,1214,374],{"class":359},[353,1216,377],{"class":359},[353,1218,381],{"class":380},[353,1220,377],{"class":359},[353,1222,386],{"class":359},[353,1224,1225,1227,1229,1231,1233,1235,1237,1239,1241],{"class":355,"line":389},[353,1226,393],{"class":392},[353,1228,396],{"class":359},[353,1230,400],{"class":399},[353,1232,403],{"class":359},[353,1234,406],{"class":392},[353,1236,409],{"class":359},[353,1238,348],{"class":380},[353,1240,377],{"class":359},[353,1242,416],{"class":359},[353,1244,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265],{"class":355,"line":419},[353,1246,393],{"class":392},[353,1248,396],{"class":359},[353,1250,426],{"class":399},[353,1252,429],{"class":359},[353,1254,432],{"class":399},[353,1256,403],{"class":359},[353,1258,406],{"class":392},[353,1260,409],{"class":359},[353,1262,441],{"class":380},[353,1264,377],{"class":359},[353,1266,416],{"class":359},[353,1268,1269],{"class":355,"line":448},[353,1270,452],{"emptyLinePlaceholder":451},[353,1272,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297],{"class":355,"line":455},[353,1274,458],{"class":367},[353,1276,461],{"class":399},[353,1278,374],{"class":359},[353,1280,400],{"class":466},[353,1282,360],{"class":359},[353,1284,472],{"class":471},[353,1286,475],{"class":359},[353,1288,478],{"class":471},[353,1290,481],{"class":359},[353,1292,484],{"class":399},[353,1294,487],{"class":359},[353,1296,490],{"class":399},[353,1298,416],{"class":359},[353,1300,1301,1303,1305,1307,1309,1311,1313,1315,1317,1319,1321,1323,1325],{"class":355,"line":495},[353,1302,458],{"class":367},[353,1304,500],{"class":399},[353,1306,374],{"class":359},[353,1308,400],{"class":466},[353,1310,360],{"class":359},[353,1312,472],{"class":471},[353,1314,475],{"class":359},[353,1316,478],{"class":471},[353,1318,481],{"class":359},[353,1320,484],{"class":399},[353,1322,487],{"class":359},[353,1324,490],{"class":399},[353,1326,416],{"class":359},[353,1328,1329,1331,1333,1335,1337,1339,1341,1343],{"class":355,"line":525},[353,1330,458],{"class":367},[353,1332,530],{"class":399},[353,1334,374],{"class":359},[353,1336,400],{"class":466},[353,1338,484],{"class":399},[353,1340,540],{"class":539},[353,1342,490],{"class":399},[353,1344,416],{"class":359},[353,1346,1347],{"class":355,"line":547},[353,1348,452],{"emptyLinePlaceholder":451},[353,1350,1351,1353,1355,1357,1359,1361,1364,1367,1369,1372,1374,1376,1378,1380],{"class":355,"line":552},[353,1352,458],{"class":367},[353,1354,557],{"class":399},[353,1356,374],{"class":359},[353,1358,426],{"class":466},[353,1360,484],{"class":399},[353,1362,1363],{"class":359},"{",[353,1365,1366],{"class":399}," anchorEl",[353,1368,429],{"class":359},[353,1370,1371],{"class":399}," floatingEl",[353,1373,429],{"class":359},[353,1375,530],{"class":399},[353,1377,597],{"class":359},[353,1379,490],{"class":399},[353,1381,416],{"class":359},[353,1383,1384],{"class":355,"line":569},[353,1385,452],{"emptyLinePlaceholder":451},[353,1387,1388,1390,1392,1394],{"class":355,"line":578},[353,1389,126],{"class":466},[353,1391,614],{"class":399},[353,1393,429],{"class":359},[353,1395,619],{"class":359},[353,1397,1398,1400,1402,1404,1406,1408],{"class":355,"line":586},[353,1399,625],{"class":363},[353,1401,628],{"class":359},[353,1403,409],{"class":359},[353,1405,633],{"class":380},[353,1407,377],{"class":359},[353,1409,575],{"class":359},[353,1411,1412,1414,1416,1419,1421],{"class":355,"line":594},[353,1413,1110],{"class":363},[353,1415,628],{"class":359},[353,1417,1418],{"class":539}," false",[353,1420,429],{"class":359},[353,1422,1423],{"class":799}," \u002F\u002F Positions with top\u002Fleft instead of CSS transform\n",[353,1425,1426,1428,1430],{"class":355,"line":604},[353,1427,643],{"class":363},[353,1429,628],{"class":359},[353,1431,619],{"class":359},[353,1433,1434,1436,1438,1440],{"class":355,"line":609},[353,1435,653],{"class":363},[353,1437,628],{"class":359},[353,1439,659],{"class":658},[353,1441,575],{"class":359},[353,1443,1444,1446,1448,1450],{"class":355,"line":622},[353,1445,667],{"class":363},[353,1447,628],{"class":359},[353,1449,672],{"class":539},[353,1451,575],{"class":359},[353,1453,1454],{"class":355,"line":640},[353,1455,700],{"class":359},[353,1457,1458,1460,1462],{"class":355,"line":650},[353,1459,597],{"class":359},[353,1461,490],{"class":399},[353,1463,416],{"class":359},[353,1465,1466,1468,1470],{"class":355,"line":664},[353,1467,715],{"class":359},[353,1469,364],{"class":363},[353,1471,386],{"class":359},[353,1473,1474],{"class":355,"line":677},[353,1475,452],{"emptyLinePlaceholder":451},[353,1477,1478,1480,1482],{"class":355,"line":697},[353,1479,360],{"class":359},[353,1481,732],{"class":363},[353,1483,386],{"class":359},[353,1485,1486,1488,1490,1492,1494,1496,1498,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522,1524,1526,1528],{"class":355,"line":703},[353,1487,740],{"class":359},[353,1489,743],{"class":363},[353,1491,400],{"class":367},[353,1493,374],{"class":359},[353,1495,377],{"class":359},[353,1497,752],{"class":380},[353,1499,377],{"class":359},[353,1501,757],{"class":367},[353,1503,374],{"class":359},[353,1505,377],{"class":359},[353,1507,743],{"class":380},[353,1509,377],{"class":359},[353,1511,768],{"class":367},[353,1513,374],{"class":359},[353,1515,377],{"class":359},[353,1517,775],{"class":380},[353,1519,377],{"class":359},[353,1521,481],{"class":359},[353,1523,782],{"class":399},[353,1525,715],{"class":359},[353,1527,743],{"class":363},[353,1529,386],{"class":359},[353,1531,1532],{"class":355,"line":712},[353,1533,452],{"emptyLinePlaceholder":451},[353,1535,1536,1538,1540,1542,1544,1546,1549,1551],{"class":355,"line":722},[353,1537,740],{"class":359},[353,1539,808],{"class":363},[353,1541,811],{"class":367},[353,1543,374],{"class":359},[353,1545,377],{"class":359},[353,1547,1548],{"class":380},"fade-scale",[353,1550,377],{"class":359},[353,1552,386],{"class":359},[353,1554,1555,1557,1559,1561,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581,1583,1585,1587,1589,1591,1593,1595,1597],{"class":355,"line":727},[353,1556,849],{"class":359},[353,1558,852],{"class":363},[353,1560,855],{"class":367},[353,1562,374],{"class":359},[353,1564,377],{"class":359},[353,1566,862],{"class":380},[353,1568,377],{"class":359},[353,1570,400],{"class":367},[353,1572,374],{"class":359},[353,1574,377],{"class":359},[353,1576,873],{"class":380},[353,1578,377],{"class":359},[353,1580,894],{"class":367},[353,1582,374],{"class":359},[353,1584,377],{"class":359},[353,1586,901],{"class":380},[353,1588,377],{"class":359},[353,1590,481],{"class":359},[353,1592,918],{"class":399},[353,1594,715],{"class":359},[353,1596,852],{"class":363},[353,1598,386],{"class":359},[353,1600,1601,1603,1605],{"class":355,"line":737},[353,1602,950],{"class":359},[353,1604,808],{"class":363},[353,1606,386],{"class":359},[353,1608,1609,1611,1613],{"class":355,"line":791},[353,1610,715],{"class":359},[353,1612,732],{"class":363},[353,1614,386],{"class":359},[353,1616,1617],{"class":355,"line":796},[353,1618,452],{"emptyLinePlaceholder":451},[353,1620,1621,1623,1625,1627],{"class":355,"line":803},[353,1622,360],{"class":359},[353,1624,976],{"class":363},[353,1626,979],{"class":367},[353,1628,386],{"class":359},[353,1630,1631,1633,1636],{"class":355,"line":840},[353,1632,271],{"class":359},[353,1634,1635],{"class":471},"fade-scale-enter-active",[353,1637,575],{"class":359},[353,1639,1640,1642,1645],{"class":355,"line":846},[353,1641,271],{"class":359},[353,1643,1644],{"class":471},"fade-scale-leave-active",[353,1646,619],{"class":359},[353,1648,1649],{"class":355,"line":880},[353,1650,1651],{"class":799},"  \u002F* Safe: transform and opacity do not conflict with top and left *\u002F\n",[353,1653,1654,1656],{"class":355,"line":886},[353,1655,1023],{"class":1022},[353,1657,1026],{"class":359},[353,1659,1660,1662,1664,1666],{"class":355,"line":908},[353,1661,1032],{"class":399},[353,1663,1035],{"class":658},[353,1665,1038],{"class":399},[353,1667,575],{"class":359},[353,1669,1670,1672,1674,1676],{"class":355,"line":927},[353,1671,1046],{"class":399},[353,1673,1035],{"class":658},[353,1675,1038],{"class":399},[353,1677,416],{"class":359},[353,1679,1680],{"class":355,"line":937},[353,1681,1058],{"class":359},[353,1683,1684],{"class":355,"line":947},[353,1685,452],{"emptyLinePlaceholder":451},[353,1687,1688,1690,1693],{"class":355,"line":957},[353,1689,271],{"class":359},[353,1691,1692],{"class":471},"fade-scale-enter-from",[353,1694,575],{"class":359},[353,1696,1697,1699,1702],{"class":355,"line":966},[353,1698,271],{"class":359},[353,1700,1701],{"class":471},"fade-scale-leave-to",[353,1703,619],{"class":359},[353,1705,1706,1708,1710,1712],{"class":355,"line":971},[353,1707,1097],{"class":1022},[353,1709,628],{"class":359},[353,1711,1102],{"class":658},[353,1713,416],{"class":359},[353,1715,1716,1718,1720,1722,1724,1726],{"class":355,"line":984},[353,1717,1110],{"class":1022},[353,1719,628],{"class":359},[353,1721,1115],{"class":466},[353,1723,484],{"class":359},[353,1725,1120],{"class":658},[353,1727,1123],{"class":359},[353,1729,1730],{"class":355,"line":990},[353,1731,1058],{"class":359},[353,1733,1734,1736,1738],{"class":355,"line":1005},[353,1735,715],{"class":359},[353,1737,976],{"class":363},[353,1739,386],{"class":359},[278,1741,1742],{},[232,1743,1744,1747,1748,1751,1752,1754,1755,1757,1758,325,1760,1762,1763,271],{},[353,1745,1746],{},"!WARNING"," Avoid ",[236,1749,1750],{},"transition: all","\nEven with ",[236,1753,319],{},", do not use ",[236,1756,1750],{}," or broad transition utility classes on the floating element. That causes ",[236,1759,324],{},[236,1761,328],{}," to animate when repositioning or opening, creating awkward sliding artifacts. Explicitly specify ",[236,1764,1765],{},"transition: opacity, transform",[273,1767,316,1769,1772],{"id":1768},"the-ispositioned-lifecycle-rules",[236,1770,1771],{},"isPositioned"," lifecycle rules",[232,1774,1775,1779,1780,1782,1783,1786,1787,1790],{},[1186,1776,1777],{"href":127},[236,1778,126],{}," returns an ",[236,1781,1771],{}," boolean ref. A common mistake is to write ",[236,1784,1785],{},"v-if=\"isPositioned\""," or ",[236,1788,1789],{},"v-show=\"isPositioned\""," to delay rendering until coordinates are ready.",[232,1792,1793],{},[264,1794,1795,1796,1786,1798,1800],{},"Do not use ",[236,1797,1785],{},[236,1799,1789],{}," to delay rendering.",[1802,1803,1804,1816],"ul",{},[302,1805,1806,1808,1809,1811,1812,1815],{},[236,1807,1785],{}," leaves the outer element empty during Floating UI's measurement pass. Floating UI calculates placement based on a 0x0 box, producing incorrect coordinates or wrong side flips. Once ",[236,1810,1771],{}," becomes ",[236,1813,1814],{},"true"," and the child mounts, the layout expands abruptly and jumps.",[302,1817,1818,1820,1821,1824],{},[236,1819,1789],{}," applies ",[236,1822,1823],{},"display: none",", which also collapses the element's layout geometry to 0x0.",[1139,1826,1828,1829],{"id":1827},"valid-uses-of-ispositioned","Valid uses of ",[236,1830,1771],{},[232,1832,1833,1835],{},[236,1834,1771],{}," is intended for side effects that must wait until the element is physically at its target coordinates:",[299,1837,1838,1921],{},[302,1839,1840,1843],{},[264,1841,1842],{},"Focus management and scrolling:",[344,1844,1847],{"className":1845,"code":1846,"language":381,"meta":349,"style":349},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","watch(isPositioned, (positioned) => {\n  if (positioned) {\n    firstInputRef.value?.focus();\n  }\n});\n",[236,1848,1849,1873,1887,1908,1913],{"__ignoreMap":349},[353,1850,1851,1854,1857,1859,1862,1866,1868,1871],{"class":355,"line":356},[353,1852,1853],{"class":466},"watch",[353,1855,1856],{"class":399},"(isPositioned",[353,1858,429],{"class":359},[353,1860,1861],{"class":359}," (",[353,1863,1865],{"class":1864},"sHdIc","positioned",[353,1867,490],{"class":359},[353,1869,1870],{"class":367}," =>",[353,1872,619],{"class":359},[353,1874,1875,1878,1880,1882,1885],{"class":355,"line":389},[353,1876,1877],{"class":392},"  if",[353,1879,1861],{"class":363},[353,1881,1865],{"class":399},[353,1883,1884],{"class":363},") ",[353,1886,566],{"class":359},[353,1888,1889,1892,1894,1897,1900,1903,1906],{"class":355,"line":419},[353,1890,1891],{"class":399},"    firstInputRef",[353,1893,271],{"class":359},[353,1895,1896],{"class":399},"value",[353,1898,1899],{"class":359},"?.",[353,1901,1902],{"class":466},"focus",[353,1904,1905],{"class":363},"()",[353,1907,416],{"class":359},[353,1909,1910],{"class":355,"line":448},[353,1911,1912],{"class":359},"  }\n",[353,1914,1915,1917,1919],{"class":355,"line":455},[353,1916,597],{"class":359},[353,1918,490],{"class":399},[353,1920,416],{"class":359},[302,1922,1923,1930,1931],{},[264,1924,1925,1926,1929],{},"Gating CSS ",[236,1927,1928],{},"@keyframes"," animations:","\nIf using placement-dependent CSS keyframe animations that slide in from a specific side, suppress the animation until coordinates are ready so it does not fire from the wrong side:\n",[344,1932,1934],{"className":346,"code":1933,"language":348,"meta":349,"style":349},"\u003Cdiv\n  ref=\"floatingEl\"\n  :style=\"{ animation: isPositioned ? undefined : 'none' }\"\n>\n",[236,1935,1936,1943,1957,1999],{"__ignoreMap":349},[353,1937,1938,1940],{"class":355,"line":356},[353,1939,360],{"class":359},[353,1941,1942],{"class":363},"div\n",[353,1944,1945,1948,1950,1952,1954],{"class":355,"line":389},[353,1946,1947],{"class":367},"  ref",[353,1949,374],{"class":359},[353,1951,377],{"class":359},[353,1953,873],{"class":380},[353,1955,1956],{"class":359},"\"\n",[353,1958,1959,1962,1964,1966,1968,1970,1973,1975,1978,1981,1984,1986,1989,1992,1995,1997],{"class":355,"line":419},[353,1960,1961],{"class":359},"  :",[353,1963,976],{"class":367},[353,1965,374],{"class":359},[353,1967,377],{"class":359},[353,1969,1363],{"class":359},[353,1971,1972],{"class":363}," animation",[353,1974,628],{"class":359},[353,1976,1977],{"class":399}," isPositioned ",[353,1979,1980],{"class":359},"?",[353,1982,1983],{"class":359}," undefined",[353,1985,823],{"class":359},[353,1987,1988],{"class":359}," '",[353,1990,1991],{"class":380},"none",[353,1993,1994],{"class":359},"'",[353,1996,403],{"class":359},[353,1998,1956],{"class":359},[353,2000,2001],{"class":355,"line":448},[353,2002,386],{"class":359},[273,2004,2006],{"id":2005},"placement-aware-transitions","Placement-aware transitions",[232,2008,2009,2010,2013,2014,628],{},"To animate a surface away from its trigger regardless of which side it flips to, bind the reactive ",[236,2011,2012],{},"placement"," returned by ",[236,2015,126],{},[344,2017,2019],{"className":346,"code":2018,"language":348,"meta":349,"style":349},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst open = ref(false);\n\nconst node = useFloatingNode({ anchorEl, floatingEl, open });\n\nconst { placement } = usePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\" @click=\"open = !open\">Toggle\u003C\u002Fbutton>\n\n  \u003CTransition name=\"scale-origin\" :duration=\"150\">\n    \u003Cdiv v-if=\"open\" ref=\"floatingEl\" :data-placement=\"placement\">\n      \u003Cdiv class=\"panel\">Menu content\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FTransition>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n\u002F* Transform origin shifts based on current placement side *\u002F\n[data-placement^=\"bottom\"] .panel {\n  transform-origin: top;\n}\n\n[data-placement^=\"top\"] .panel {\n  transform-origin: bottom;\n}\n\n[data-placement^=\"right\"] .panel {\n  transform-origin: left;\n}\n\n[data-placement^=\"left\"] .panel {\n  transform-origin: right;\n}\n\u003C\u002Fstyle>\n",[236,2020,2021,2041,2061,2085,2089,2117,2145,2163,2167,2197,2201,2223,2237,2245,2255,2265,2269,2277,2285,2289,2297,2344,2348,2379,2418,2444,2452,2460,2468,2472,2482,2487,2514,2526,2530,2534,2556,2567,2571,2575,2598,2609,2613,2617,2639,2650,2654],{"__ignoreMap":349},[353,2022,2023,2025,2027,2029,2031,2033,2035,2037,2039],{"class":355,"line":356},[353,2024,360],{"class":359},[353,2026,364],{"class":363},[353,2028,368],{"class":367},[353,2030,371],{"class":367},[353,2032,374],{"class":359},[353,2034,377],{"class":359},[353,2036,381],{"class":380},[353,2038,377],{"class":359},[353,2040,386],{"class":359},[353,2042,2043,2045,2047,2049,2051,2053,2055,2057,2059],{"class":355,"line":389},[353,2044,393],{"class":392},[353,2046,396],{"class":359},[353,2048,400],{"class":399},[353,2050,403],{"class":359},[353,2052,406],{"class":392},[353,2054,409],{"class":359},[353,2056,348],{"class":380},[353,2058,377],{"class":359},[353,2060,416],{"class":359},[353,2062,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083],{"class":355,"line":419},[353,2064,393],{"class":392},[353,2066,396],{"class":359},[353,2068,426],{"class":399},[353,2070,429],{"class":359},[353,2072,432],{"class":399},[353,2074,403],{"class":359},[353,2076,406],{"class":392},[353,2078,409],{"class":359},[353,2080,441],{"class":380},[353,2082,377],{"class":359},[353,2084,416],{"class":359},[353,2086,2087],{"class":355,"line":448},[353,2088,452],{"emptyLinePlaceholder":451},[353,2090,2091,2093,2095,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115],{"class":355,"line":455},[353,2092,458],{"class":367},[353,2094,461],{"class":399},[353,2096,374],{"class":359},[353,2098,400],{"class":466},[353,2100,360],{"class":359},[353,2102,472],{"class":471},[353,2104,475],{"class":359},[353,2106,478],{"class":471},[353,2108,481],{"class":359},[353,2110,484],{"class":399},[353,2112,487],{"class":359},[353,2114,490],{"class":399},[353,2116,416],{"class":359},[353,2118,2119,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143],{"class":355,"line":495},[353,2120,458],{"class":367},[353,2122,500],{"class":399},[353,2124,374],{"class":359},[353,2126,400],{"class":466},[353,2128,360],{"class":359},[353,2130,472],{"class":471},[353,2132,475],{"class":359},[353,2134,478],{"class":471},[353,2136,481],{"class":359},[353,2138,484],{"class":399},[353,2140,487],{"class":359},[353,2142,490],{"class":399},[353,2144,416],{"class":359},[353,2146,2147,2149,2151,2153,2155,2157,2159,2161],{"class":355,"line":525},[353,2148,458],{"class":367},[353,2150,530],{"class":399},[353,2152,374],{"class":359},[353,2154,400],{"class":466},[353,2156,484],{"class":399},[353,2158,540],{"class":539},[353,2160,490],{"class":399},[353,2162,416],{"class":359},[353,2164,2165],{"class":355,"line":547},[353,2166,452],{"emptyLinePlaceholder":451},[353,2168,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187,2189,2191,2193,2195],{"class":355,"line":552},[353,2170,458],{"class":367},[353,2172,557],{"class":399},[353,2174,374],{"class":359},[353,2176,426],{"class":466},[353,2178,484],{"class":399},[353,2180,1363],{"class":359},[353,2182,1366],{"class":399},[353,2184,429],{"class":359},[353,2186,1371],{"class":399},[353,2188,429],{"class":359},[353,2190,530],{"class":399},[353,2192,597],{"class":359},[353,2194,490],{"class":399},[353,2196,416],{"class":359},[353,2198,2199],{"class":355,"line":569},[353,2200,452],{"emptyLinePlaceholder":451},[353,2202,2203,2205,2207,2210,2212,2215,2217,2219,2221],{"class":355,"line":578},[353,2204,458],{"class":367},[353,2206,396],{"class":359},[353,2208,2209],{"class":399}," placement ",[353,2211,597],{"class":359},[353,2213,2214],{"class":359}," =",[353,2216,432],{"class":466},[353,2218,614],{"class":399},[353,2220,429],{"class":359},[353,2222,619],{"class":359},[353,2224,2225,2227,2229,2231,2233,2235],{"class":355,"line":586},[353,2226,625],{"class":363},[353,2228,628],{"class":359},[353,2230,409],{"class":359},[353,2232,633],{"class":380},[353,2234,377],{"class":359},[353,2236,575],{"class":359},[353,2238,2239,2241,2243],{"class":355,"line":594},[353,2240,643],{"class":363},[353,2242,628],{"class":359},[353,2244,619],{"class":359},[353,2246,2247,2249,2251,2253],{"class":355,"line":604},[353,2248,653],{"class":363},[353,2250,628],{"class":359},[353,2252,659],{"class":658},[353,2254,575],{"class":359},[353,2256,2257,2259,2261,2263],{"class":355,"line":609},[353,2258,667],{"class":363},[353,2260,628],{"class":359},[353,2262,672],{"class":539},[353,2264,575],{"class":359},[353,2266,2267],{"class":355,"line":622},[353,2268,700],{"class":359},[353,2270,2271,2273,2275],{"class":355,"line":640},[353,2272,597],{"class":359},[353,2274,490],{"class":399},[353,2276,416],{"class":359},[353,2278,2279,2281,2283],{"class":355,"line":650},[353,2280,715],{"class":359},[353,2282,364],{"class":363},[353,2284,386],{"class":359},[353,2286,2287],{"class":355,"line":664},[353,2288,452],{"emptyLinePlaceholder":451},[353,2290,2291,2293,2295],{"class":355,"line":677},[353,2292,360],{"class":359},[353,2294,732],{"class":363},[353,2296,386],{"class":359},[353,2298,2299,2301,2303,2305,2307,2309,2311,2313,2315,2317,2319,2321,2323,2325,2327,2329,2331,2333,2335,2338,2340,2342],{"class":355,"line":697},[353,2300,740],{"class":359},[353,2302,743],{"class":363},[353,2304,400],{"class":367},[353,2306,374],{"class":359},[353,2308,377],{"class":359},[353,2310,752],{"class":380},[353,2312,377],{"class":359},[353,2314,757],{"class":367},[353,2316,374],{"class":359},[353,2318,377],{"class":359},[353,2320,743],{"class":380},[353,2322,377],{"class":359},[353,2324,768],{"class":367},[353,2326,374],{"class":359},[353,2328,377],{"class":359},[353,2330,775],{"class":380},[353,2332,377],{"class":359},[353,2334,481],{"class":359},[353,2336,2337],{"class":399},"Toggle",[353,2339,715],{"class":359},[353,2341,743],{"class":363},[353,2343,386],{"class":359},[353,2345,2346],{"class":355,"line":703},[353,2347,452],{"emptyLinePlaceholder":451},[353,2349,2350,2352,2354,2356,2358,2360,2363,2365,2367,2369,2371,2373,2375,2377],{"class":355,"line":712},[353,2351,740],{"class":359},[353,2353,808],{"class":363},[353,2355,811],{"class":367},[353,2357,374],{"class":359},[353,2359,377],{"class":359},[353,2361,2362],{"class":380},"scale-origin",[353,2364,377],{"class":359},[353,2366,823],{"class":359},[353,2368,826],{"class":367},[353,2370,374],{"class":359},[353,2372,377],{"class":359},[353,2374,833],{"class":658},[353,2376,377],{"class":359},[353,2378,386],{"class":359},[353,2380,2381,2383,2385,2387,2389,2391,2393,2395,2397,2399,2401,2403,2405,2408,2410,2412,2414,2416],{"class":355,"line":722},[353,2382,849],{"class":359},[353,2384,852],{"class":363},[353,2386,855],{"class":367},[353,2388,374],{"class":359},[353,2390,377],{"class":359},[353,2392,862],{"class":380},[353,2394,377],{"class":359},[353,2396,400],{"class":367},[353,2398,374],{"class":359},[353,2400,377],{"class":359},[353,2402,873],{"class":380},[353,2404,377],{"class":359},[353,2406,2407],{"class":367}," :data-placement",[353,2409,374],{"class":359},[353,2411,377],{"class":359},[353,2413,2012],{"class":380},[353,2415,377],{"class":359},[353,2417,386],{"class":359},[353,2419,2420,2422,2424,2426,2428,2430,2432,2434,2436,2438,2440,2442],{"class":355,"line":727},[353,2421,889],{"class":359},[353,2423,852],{"class":363},[353,2425,894],{"class":367},[353,2427,374],{"class":359},[353,2429,377],{"class":359},[353,2431,901],{"class":380},[353,2433,377],{"class":359},[353,2435,481],{"class":359},[353,2437,918],{"class":399},[353,2439,715],{"class":359},[353,2441,852],{"class":363},[353,2443,386],{"class":359},[353,2445,2446,2448,2450],{"class":355,"line":737},[353,2447,940],{"class":359},[353,2449,852],{"class":363},[353,2451,386],{"class":359},[353,2453,2454,2456,2458],{"class":355,"line":791},[353,2455,950],{"class":359},[353,2457,808],{"class":363},[353,2459,386],{"class":359},[353,2461,2462,2464,2466],{"class":355,"line":796},[353,2463,715],{"class":359},[353,2465,732],{"class":363},[353,2467,386],{"class":359},[353,2469,2470],{"class":355,"line":803},[353,2471,452],{"emptyLinePlaceholder":451},[353,2473,2474,2476,2478,2480],{"class":355,"line":840},[353,2475,360],{"class":359},[353,2477,976],{"class":363},[353,2479,979],{"class":367},[353,2481,386],{"class":359},[353,2483,2484],{"class":355,"line":846},[353,2485,2486],{"class":799},"\u002F* Transform origin shifts based on current placement side *\u002F\n",[353,2488,2489,2492,2495,2498,2500,2503,2505,2508,2510,2512],{"class":355,"line":880},[353,2490,2491],{"class":359},"[",[353,2493,2494],{"class":367},"data-placement",[353,2496,2497],{"class":359},"^=",[353,2499,377],{"class":359},[353,2501,2502],{"class":380},"bottom",[353,2504,377],{"class":359},[353,2506,2507],{"class":359},"]",[353,2509,998],{"class":359},[353,2511,901],{"class":471},[353,2513,619],{"class":359},[353,2515,2516,2519,2521,2524],{"class":355,"line":886},[353,2517,2518],{"class":1022},"  transform-origin",[353,2520,628],{"class":359},[353,2522,2523],{"class":399}," top",[353,2525,416],{"class":359},[353,2527,2528],{"class":355,"line":908},[353,2529,1058],{"class":359},[353,2531,2532],{"class":355,"line":927},[353,2533,452],{"emptyLinePlaceholder":451},[353,2535,2536,2538,2540,2542,2544,2546,2548,2550,2552,2554],{"class":355,"line":937},[353,2537,2491],{"class":359},[353,2539,2494],{"class":367},[353,2541,2497],{"class":359},[353,2543,377],{"class":359},[353,2545,324],{"class":380},[353,2547,377],{"class":359},[353,2549,2507],{"class":359},[353,2551,998],{"class":359},[353,2553,901],{"class":471},[353,2555,619],{"class":359},[353,2557,2558,2560,2562,2565],{"class":355,"line":947},[353,2559,2518],{"class":1022},[353,2561,628],{"class":359},[353,2563,2564],{"class":399}," bottom",[353,2566,416],{"class":359},[353,2568,2569],{"class":355,"line":957},[353,2570,1058],{"class":359},[353,2572,2573],{"class":355,"line":966},[353,2574,452],{"emptyLinePlaceholder":451},[353,2576,2577,2579,2581,2583,2585,2588,2590,2592,2594,2596],{"class":355,"line":971},[353,2578,2491],{"class":359},[353,2580,2494],{"class":367},[353,2582,2497],{"class":359},[353,2584,377],{"class":359},[353,2586,2587],{"class":380},"right",[353,2589,377],{"class":359},[353,2591,2507],{"class":359},[353,2593,998],{"class":359},[353,2595,901],{"class":471},[353,2597,619],{"class":359},[353,2599,2600,2602,2604,2607],{"class":355,"line":984},[353,2601,2518],{"class":1022},[353,2603,628],{"class":359},[353,2605,2606],{"class":399}," left",[353,2608,416],{"class":359},[353,2610,2611],{"class":355,"line":990},[353,2612,1058],{"class":359},[353,2614,2615],{"class":355,"line":1005},[353,2616,452],{"emptyLinePlaceholder":451},[353,2618,2619,2621,2623,2625,2627,2629,2631,2633,2635,2637],{"class":355,"line":1019},[353,2620,2491],{"class":359},[353,2622,2494],{"class":367},[353,2624,2497],{"class":359},[353,2626,377],{"class":359},[353,2628,328],{"class":380},[353,2630,377],{"class":359},[353,2632,2507],{"class":359},[353,2634,998],{"class":359},[353,2636,901],{"class":471},[353,2638,619],{"class":359},[353,2640,2641,2643,2645,2648],{"class":355,"line":1029},[353,2642,2518],{"class":1022},[353,2644,628],{"class":359},[353,2646,2647],{"class":399}," right",[353,2649,416],{"class":359},[353,2651,2652],{"class":355,"line":1043},[353,2653,1058],{"class":359},[353,2655,2656,2658,2660],{"class":355,"line":1055},[353,2657,715],{"class":359},[353,2659,976],{"class":363},[353,2661,386],{"class":359},[232,2663,2664,2665,2667,2668,2671],{},"When ",[236,2666,199],{}," changes the active placement from bottom to top, ",[236,2669,2670],{},"transform-origin"," automatically updates so the entrance animation originates from the trigger edge.",[273,2673,2675],{"id":2674},"where-to-go-next","Where to go next",[1802,2677,2678,2684,2689],{},[302,2679,2680,2681,2683],{},"Read ",[1186,2682,57],{"href":58}," to configure boundary collision and sizing behavior.",[302,2685,2680,2686,2688],{},[1186,2687,61],{"href":62}," to position against pointer coordinates and synthetic elements.",[302,2690,2691,2692,2697],{},"Inspect the ",[1186,2693,2694,2696],{"href":127},[236,2695,126],{}," API Reference"," for all positioning parameters and return values.",[976,2699,2700],{},"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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 .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}",{"title":349,"searchDepth":389,"depth":389,"links":2702},[2703,2704,2708,2710,2715,2716],{"id":275,"depth":389,"text":276},{"id":335,"depth":389,"text":336,"children":2705},[2706],{"id":1141,"depth":419,"text":2707},"Why :duration is required",{"id":1175,"depth":389,"text":2709},"Pattern 2: Single element with transform: false",{"id":1768,"depth":389,"text":2711,"children":2712},"The isPositioned lifecycle rules",[2713],{"id":1827,"depth":419,"text":2714},"Valid uses of isPositioned",{"id":2005,"depth":389,"text":2006},{"id":2674,"depth":389,"text":2675},"Animate floating elements with Vue transitions and CSS without layout jumps or origin flashes.","md",null,{},{"title":65,"description":2717},"DiQcynnTmhQE8VNSpkiozjYRTQk5xRrhe6KkT6WeYzI",[2724,2726],{"title":61,"path":62,"stem":63,"description":2725,"children":-1},"Position floating content from pointer coordinates, synthetic rectangles, and dynamic selections.",{"title":75,"path":76,"stem":77,"description":2727,"children":-1},"Connect anchors and floating surfaces with ARIA roles, states, and accessibility relationships.",1791268049210]