Transitions (x-transition)

Animate entrance and leave of elements controlled by x-show.

Transition Effects

Alpine provides a rich set of x-transition directives to animate elements when they are shown or hidden via x-show. You can use Tailwind CSS utility classes to define the animation, making it incredibly easy to add polish.

Basic Transition

Code

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-transition>
    I fade and scale by default.
  </div>
</div>

Customising with Tailwind

You can define exactly how the element enters and leaves by specifying CSS classes for each state.

Code

<div x-show="open"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 scale-90"
     x-transition:enter-end="opacity-100 scale-100"
     x-transition:leave="transition ease-in duration-200"
     x-transition:leave-start="opacity-100 scale-100"
     x-transition:leave-end="opacity-0 scale-90">
  Animated content
</div>

Shortcut Modifiers

For common animations, Alpine provides shortcut modifiers like .opacity and .scale.

Code

<div x-show="open" x-transition.opacity.scale>

Duration and Delay

Code

<div x-show="open" x-transition.duration.500ms.delay.100ms>

💡 Tip

When using custom classes, don't forget the transition property. For Tailwind, use the transition utility as shown above.

Helpful? Share this page!↑ Back to top