Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: remove slide animations from Dialog due to unexpected behavior #7114

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

liby
Copy link
Contributor

@liby liby commented Apr 2, 2025

Fixes #6649, where the default AlertDialog and Dialog component exhibited unexpected diagonal slide animations upon opening and closing.

The reasons for removing these specific slide animations are:

  1. Unnatural Behavior: The diagonal sliding effect feels jarring and inconsistent with a smooth dialog transition. (Note: There also appear to be inconsistencies in how this specific animation renders between different animation libraries like tailwindcss-animate and tw-animate-css).
  2. Inconsistency with Preview: The presence of these slide animations in the installed component code conflicts with the website preview/demo for the AlertDialog or Dialog, which does not feature this diagonal sliding effect. This inconsistency can be confusing for users.
  3. Alignment with Current Styles & User Choice: Newer component styles (e.g., new-york-v4 style components installed via the CLI for Tailwind v4 projects) seem to omit these specific slide animations for AlertDialog. Removing them from the base styles promotes consistency and gives users the explicit choice to add custom motion if desired, rather than removing an unexpected default animation.

To resolve this, the following classes have been removed from AlertDialogContent and DialogContent in both default and new-york styles:

  • data-[state=closed]:slide-out-to-left-1/2
  • data-[state=closed]:slide-out-to-top-[48%]
  • data-[state=open]:slide-in-from-left-1/2
  • data-[state=open]:slide-in-from-top-[48%]

The remaining fade-* and zoom-* animations provide a clean, centered open/close transition.

Copy link

vercel bot commented Apr 2, 2025

@liby is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[bug]: animation behavior for the Dialog component
1 participant