fix: stop Select/Dialog enter animations from transitioning position
Root cause: Tailwind's `duration-100` utility sets the literal CSS
`transition-duration` property (it's meant for transitions, not
animations). Since `transition-property`'s initial value is `all` and
nothing overrode it, every element using `duration-100` in its
Transition enter/leave-active-class picked up an unintended
`transition: all 100ms`. For SelectContent, whose `top`/`left` are set
via inline style from usePopoverPosition, this meant the popover's
real computed position (set synchronously on mount) got smoothly
interpolated from the reactive object's initial {top:0,left:0} default
-- visibly flying in from the top-left corner of the viewport before
landing in place.
Fix: use tw-animate-css's dedicated `animation-duration-*` utility
instead, which sets `animation-duration`/`--tw-animation-duration`
without ever touching `transition-property`/`transition-duration`.
Confirmed via computed-style inspection in headless Chromium that
transitionDuration is now 0s while the intended enter/exit keyframe
animation still runs for 100ms. Applied everywhere `duration-100` was
used for this pattern (DialogContent, DialogOverlay,
DialogScrollContent, SelectContent).
This commit is contained in:
parent
b8fb6769c7
commit
a2685c6920
4 changed files with 8 additions and 8 deletions
|
|
@ -34,8 +34,8 @@ watch(context.open, (value) => { isLocked.value = value }, { immediate: true })
|
||||||
<Teleport to="body">
|
<Teleport to="body">
|
||||||
<DialogOverlay />
|
<DialogOverlay />
|
||||||
<Transition
|
<Transition
|
||||||
enter-active-class="animate-in fade-in-0 zoom-in-95 duration-100"
|
enter-active-class="animate-in fade-in-0 zoom-in-95 animation-duration-100"
|
||||||
leave-active-class="animate-out fade-out-0 zoom-out-95 duration-100"
|
leave-active-class="animate-out fade-out-0 zoom-out-95 animation-duration-100"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="context.open.value"
|
v-if="context.open.value"
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,8 @@ const context = inject(DialogContextKey)!
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<Transition
|
<Transition
|
||||||
enter-active-class="animate-in fade-in-0 duration-100"
|
enter-active-class="animate-in fade-in-0 animation-duration-100"
|
||||||
leave-active-class="animate-out fade-out-0 duration-100"
|
leave-active-class="animate-out fade-out-0 animation-duration-100"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="context.open.value"
|
v-if="context.open.value"
|
||||||
|
|
|
||||||
|
|
@ -34,8 +34,8 @@ watch(context.open, (value) => { isLocked.value = value }, { immediate: true })
|
||||||
<template>
|
<template>
|
||||||
<Teleport to="body">
|
<Teleport to="body">
|
||||||
<Transition
|
<Transition
|
||||||
enter-active-class="animate-in fade-in-0 duration-100"
|
enter-active-class="animate-in fade-in-0 animation-duration-100"
|
||||||
leave-active-class="animate-out fade-out-0 duration-100"
|
leave-active-class="animate-out fade-out-0 animation-duration-100"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="context.open.value"
|
v-if="context.open.value"
|
||||||
|
|
|
||||||
|
|
@ -85,8 +85,8 @@ watch(context.open, (value) => { isLocked.value = value }, { immediate: true })
|
||||||
<template>
|
<template>
|
||||||
<Teleport to="body">
|
<Teleport to="body">
|
||||||
<Transition
|
<Transition
|
||||||
enter-active-class="animate-in fade-in-0 zoom-in-95 duration-100"
|
enter-active-class="animate-in fade-in-0 zoom-in-95 animation-duration-100"
|
||||||
leave-active-class="animate-out fade-out-0 zoom-out-95 duration-100"
|
leave-active-class="animate-out fade-out-0 zoom-out-95 animation-duration-100"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="context.open.value"
|
v-if="context.open.value"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue