AlpineJS Skill: Applying CSS Transitions (`x-transition`)

These directives control the visibility or existence of an HTML element. x-transition hooks into these to animate the appearance and disappearance.

• x-show toggles the display: none; style.
• x-if conditionally renders elements to the DOM. Transitions work with both.

CSS classes applied to the element for the entire duration of its entrance. This is typically where you define the CSS transition property itself and its duration/easing (e.g., transition-opacity duration-300 ease-out using Tailwind).

<div x-show="open" x-transition:enter="transition ease-out duration-300">...</div>

CSS classes defining the element's state just before it starts entering. For example, to fade in, you'd start with zero opacity (e.g., opacity-0). For a scale effect, you might use transform scale-95.

<div x-show="open" ... x-transition:enter-start="opacity-0 transform scale-95">...</div>

CSS classes defining the element's state after it has finished entering. This is the fully visible state (e.g., opacity-100 transform scale-100).

<div x-show="open" ... x-transition:enter-end="opacity-100 transform scale-100">...</div>

CSS classes applied for the entire duration of the element's departure. Similar to :enter, define the transition properties here (e.g., transition ease-in duration-200).

<div x-show="open" ... x-transition:leave="transition ease-in duration-200">...</div>

CSS classes defining the element's state just before it starts leaving (usually its fully visible state, e.g., opacity-100 transform scale-100).

<div x-show="open" ... x-transition:leave-start="opacity-100 transform scale-100">...</div>

CSS classes defining the element's state after it has finished leaving (e.g., fully transparent and scaled down: opacity-0 transform scale-95).

<div x-show="open" ... x-transition:leave-end="opacity-0 transform scale-95">...</div>

AlpineJS provides convenient shorthands for common transitions:

• x-transition: Applies a default fade and scale transition.

  <div x-show="open" x-transition>Simple fade and scale</div>

• x-transition.opacity: Applies only an opacity (fade) transition.
• x-transition.scale: Applies only a scale transition.
• Modifiers: You can chain modifiers like .duration.[time] (e.g., .duration.500ms), .delay.[time], .origin.[position].

  <div x-show="open" x-transition.opacity.duration.700ms>Fade over 700ms</div>

Alpine's x-transition directives only add and remove CSS classes. Your actual CSS must define the transition property (e.g., transition: opacity 0.3s ease; or using Tailwind classes like transition-opacity duration-300 ease-in-out) and the styles for the start/end states (e.g., opacity: 0; and opacity: 1;, or Tailwind's opacity-0 and opacity-100) for those classes to have an effect. Without the CSS transition property, the change in classes will be instantaneous, not animated.

For x-if, because the element is truly added to or removed from the DOM, the transition directives must be on the element itself or a direct child if the element being conditionally rendered is a <template> tag. Alpine handles this well in most cases, but it's a point to remember. The element needs to exist briefly with the `leave-start` classes before being removed for the leave animation to play.

Keep your transition classes focused. If you have many other utility classes (e.g., from Tailwind CSS) that also affect transform, opacity, or other transitioned properties, ensure they don't conflict with your intended x-transition behavior. Using dedicated transition classes can make it clearer. For instance, if a general utility class sets opacity: 1 !important, it might override your opacity-0 class in enter-start.