improve popout animations (#7040)

packages/ui/src/components/base/Combobox.vue

@@ -97,12 +97,7 @@
 		</ButtonFrame>
 
 		<Teleport to="#teleports">
-			<Transition
+			<Transition name="floating-expand">
-				enter-active-class="transition-opacity duration-150"
-				leave-active-class="transition-opacity duration-150"
-				enter-from-class="opacity-0"
-				leave-to-class="opacity-0"
-			>
 				<div
 					v-if="shouldRenderDropdown"
 					ref="dropdownRef"
@@ -110,7 +105,6 @@
 					:class="[
 						props.dropdownClass,
 						openDirection === 'up' ? 'shadow-[0_-25px_50px_-12px_rgb(0,0,0,0.25)]' : 'shadow-2xl',
-						props.dropdownClass,
 					]"
 					:style="dropdownStyle"
 					:role="listbox ? 'listbox' : 'menu'"

packages/ui/src/components/base/DropdownFilterBar.vue

@@ -128,12 +128,7 @@
 	</div>
 
 	<Teleport to="#teleports">
-		<Transition
+		<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
-			:enter-active-class="addMenuTransitionEnterActiveClass"
-			leave-active-class="transition-none duration-0"
-			:enter-from-class="addMenuTransitionEnterFromClass"
-			leave-to-class="opacity-0"
-		>
 			<div
 				v-if="isAddMenuOpen && !isMobileActiveSubmenu"
 				ref="menuContainer"
@@ -166,6 +161,7 @@
 	</Teleport>
 
 	<Teleport to="#teleports">
+		<Transition name="floating-expand" :css="!isMobileAddMenuLayout">
 			<div
 				v-if="isAddMenuOpen && activeCategory && (isMobileAddMenuLayout || hasSubmenuPosition)"
 				ref="submenu"
@@ -211,7 +207,10 @@
 					></slot>
 				</div>
 
-			<div v-if="$slots['category-top']" class="border-0 border-b border-solid border-b-surface-5">
+				<div
+					v-if="$slots['category-top']"
+					class="border-0 border-b border-solid border-b-surface-5"
+				>
 					<slot
 						name="category-top"
 						:category="activeCategory"
@@ -266,7 +265,9 @@
 							<div
 								v-for="{ item, index } in renderedVisibleActiveCategoryOptions"
 								:key="getActiveCategoryItemKey(item, index)"
-							:class="shouldVirtualizeActiveCategoryOptions ? 'absolute left-0 right-0' : undefined"
+								:class="
+									shouldVirtualizeActiveCategoryOptions ? 'absolute left-0 right-0' : undefined
+								"
 								:style="getActiveCategoryOptionWrapperStyle(index)"
 							>
 								<div
@@ -367,6 +368,7 @@
 					:close-menu="closeAddMenu"
 				></slot>
 			</div>
+		</Transition>
 	</Teleport>
 </template>
 
@@ -726,12 +728,6 @@ const isMobileActiveSubmenu = computed(
 	() =>
 		isMobileAddMenuLayout.value && activeCategory.value !== undefined && hasSubmenuPosition.value,
 )
-const addMenuTransitionEnterActiveClass = computed(() =>
-	isMobileAddMenuLayout.value ? 'transition-none duration-0' : 'transition-opacity duration-150',
-)
-const addMenuTransitionEnterFromClass = computed(() =>
-	isMobileAddMenuLayout.value ? 'opacity-100' : 'opacity-0',
-)
 const addMenuTriggerElement = computed(() => addMenuTrigger.value?.element ?? null)
 const addMenuOutsideClickTarget = computed(() => menuContainer.value ?? submenu.value)
 const addMenuOutsideClickIgnore = computed(() => [addMenuTriggerElement, menuContainer, submenu])

packages/ui/src/components/base/MultiSelect.vue

@@ -108,12 +108,7 @@
 		</component>
 
 		<Teleport to="#teleports">
-			<Transition
+			<Transition name="floating-expand">
-				enter-active-class="transition-opacity duration-150"
-				leave-active-class="transition-opacity duration-150"
-				enter-from-class="opacity-0"
-				leave-to-class="opacity-0"
-			>
 				<div
 					v-if="isOpen"
 					ref="dropdownRef"

packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue

@@ -80,6 +80,19 @@ const { isOpen, panelStyle, anchorStyle, resolvedSide, open, close } = useAnchor
 	resolvedDistance,
 )
 
+const menuTransformOrigin = computed(() => {
+	switch (resolvedSide.value) {
+		case 'top':
+			return 'bottom center'
+		case 'left':
+			return 'right center'
+		case 'right':
+			return 'left center'
+		default:
+			return 'top center'
+	}
+})
+
 const menuItemClasses =
 	'overflow-menu-item flex min-h-10 w-full items-center gap-2 rounded-[10px] border-0 bg-transparent px-3 py-2 text-left text-base font-semibold leading-5 text-contrast no-underline ' +
 	'cursor-pointer whitespace-nowrap hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:outline-none ' +
@@ -294,20 +307,13 @@ defineExpose({ open: openMenu, close: closeMenu })
 	</component>
 
 	<Teleport to="body">
-		<Transition
+		<Transition name="floating-expand">
-			enter-active-class="transition duration-125 ease-out"
-			enter-from-class="scale-95 opacity-0"
-			enter-to-class="scale-100 opacity-100"
-			leave-active-class="transition duration-100 ease-in"
-			leave-from-class="scale-100 opacity-100"
-			leave-to-class="scale-95 opacity-0"
-		>
 			<div
 				v-if="isOpen"
 				:id="menuId"
 				ref="panelElement"
 				class="fixed isolate z-[9999] flex min-w-48 flex-col gap-1 rounded-[14px] bg-surface-3 p-2 shadow-lg ring-1 ring-surface-5"
-				:style="panelStyle"
+				:style="[panelStyle, { transformOrigin: menuTransformOrigin }]"
 				role="menu"
 				:aria-label="props.label"
 				@keydown="handleMenuKeydown"

packages/ui/src/components/base/buttons/TeleportPopoutMenu.vue

@@ -123,14 +123,7 @@ defineExpose({ open: openMenu, close: closeMenu })
 	</component>
 
 	<Teleport to="body">
-		<Transition
+		<Transition name="floating-expand">
-			enter-active-class="transition duration-125 ease-out"
-			enter-from-class="scale-95 opacity-0"
-			enter-to-class="scale-100 opacity-100"
-			leave-active-class="transition duration-100 ease-in"
-			leave-from-class="scale-100 opacity-100"
-			leave-to-class="scale-95 opacity-0"
-		>
 			<div
 				v-if="isOpen"
 				:id="panelId"

packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue

@@ -1,18 +1,11 @@
 <template>
 	<Teleport to="#teleports">
-		<Transition
+		<Transition name="floating-expand">
-			enter-active-class="transition duration-125 ease-out"
-			enter-from-class="transform scale-75 opacity-0"
-			enter-to-class="transform scale-100 opacity-100"
-			leave-active-class="transition duration-125 ease-in"
-			leave-from-class="transform scale-100 opacity-100"
-			leave-to-class="transform scale-75 opacity-0"
-		>
 			<div
 				v-if="visible"
 				ref="menuRef"
 				class="fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
-				:style="{ left: `${position.x}px`, top: `${position.y}px` }"
+				:style="{ left: `${position.x}px`, top: `${position.y}px`, transformOrigin: 'top left' }"
 				role="menu"
 				tabindex="-1"
 				@mousedown.stop

packages/ui/src/styles/tailwind-utilities.css

@@ -1,3 +1,26 @@
+:root {
+	--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.floating-expand-enter-from,
+.floating-expand-leave-to {
+	opacity: 0;
+	scale: 0.9 0.3;
+}
+
+.floating-expand-enter-to,
+.floating-expand-leave-from {
+	opacity: 1;
+}
+
+.floating-expand-enter-active,
+.floating-expand-leave-active {
+	transition:
+		opacity 0.125s var(--ease-out-expo),
+		scale 0.125s var(--ease-out-expo);
+	transform-origin: top;
+}
+
 @layer utilities {
 	.heading-xl {
 		@apply m-0 text-xl font-semibold leading-none text-contrast;