x-transition

Alpine provides a robust transitions utility out of the box. With the help of x-transition directive, you can create smooth transitions between when an element is shown or hidden.

There are two primary ways to handle transitions in Alpine:

• The Transition Helper
• Applying CSS Classes

The Transition Helper

The simplest way to achieve a transition using Alpine is by adding x-transition to an element with x-show on it. For example:

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>
 
    <div x-show="open" x-transition>
        Hello 👋
    </div>
</div>

NOTE

The default transition of x-transition is fade and scale to reveal the element.

You can override the default transition with modifiers attached to x-transition.

.duration

By default, the duration is set to be 150 milliseconds when entering, and 75 milliseconds when leaving.

To override this using .duration modifier:

<div ... x-transition.duration.500ms>

The above <div> will transition for 500 milliseconds when entering, and 500 milliseconds when leaving.

You can also specify the duration explicitly for entering and leaving:

<div ...
    x-transition:enter.duration.500ms
    x-transition:leave.duration.400ms
>

.delay

You can delay a transition using the .delay modifier like so:

<div ... x-transition.delay.50ms>

.opacity

By default, Alpine's x-transition applies both a scale and opacity transition to achieve a "fade" effect. If you wish to only apply the opacity transition (no scale), you can accomplish that like so:

<div ... x-transition.opacity>

.scale

Similar to the .opacity modifier, you can configure x-transition to ONLY scale (and not transition opacity as well) like so:

<div ... x-transition.scale>

The .scale modifier also offers the ability to configure its scale values:

<div ... x-transition.scale.80>

The above <div> will scale up and down by 80%.

You can also specify the scale value explicitly for entering and leaving:

<div ...
    x-transition:enter.scale.80
    x-transition:leave.scale.90
>

.origin

You can even customize the origin of the scale transition, using the .origin modifier:

<div ... x-transition.scale.origin.top>

Here the scale will be applied using the top of the element as the origin, instead of the center by default.

Possible values for this customization: top, bottom, left and right.

You can also combine two origin values. For example, if you want the origin of the scale to be "Top Right":

<div ... x-transition.scale.origin.top.right>

Applying CSS Classes

For direct control over exactly what goes into your transitions, you can apply CSS classes at different stages of the transition.

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>
 
    <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-300"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90">
        Hello 👋
    </div>
</div>

Directive	Description
:enter	Applied during the entire entering phase.
:enter-start	Added before element is inserted, removed one frame after element is inserted.
:enter-end	Added one frame after element is inserted (at the same time enter-start is removed), removed when transition/animation finishes.
:leave	Applied during the entire leaving phase.
:leave-start	Added immediately when a leaving transition is triggered, removed after one frame.
:leave-end	Added one frame after a leaving transition is triggered (at the same time leave-start is removed), removed when the transition/animation finishes.