Skip to content

DropdownMenu.Content exit animation does not run before unmount (animate-out skipped) #1977

@timwehrle

Description

@timwehrle

Describe the bug

When closing a DropdownMenu, the exit animation defined via:

data-[state=closed]:animate-out
data-[state=closed]:fade-out-0
data-[state=closed]:zoom-out-95

does not run. Instead, the content disappears immediately. As I haven't changed the code from the installed dropdown menu, I would have expected it to work like the example on the documentation site (https://shadcn-svelte.com/docs/components/dropdown-menu).

Reproduction

Create a new SvelteKit project, init shadcn-svelte and install the dropdown-menu. Then test its behaviour. tw-animate-css is added automatically so this is not the problem.

Logs

System Info

System:
    OS: macOS 26.3
    CPU: (10) arm64 Apple M4
    Memory: 198.00 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 25.6.1 - /opt/homebrew/bin/node
    npm: 11.9.0 - /opt/homebrew/bin/npm
    pnpm: 10.30.1 - /Users/user/Library/pnpm/pnpm
  Browsers:
    Firefox: 147.0.4
    Safari: 26.3
  npmPackages:
    @lucide/svelte: ^0.561.0 => 0.561.0
    @sveltejs/kit: ^2.50.2 => 2.53.0
    bits-ui: ^2.16.2 => 2.16.2
    svelte: ^5.51.0 => 5.53.2
    tailwindcss: ^4.1.18 => 4.2.0

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions