How to change transition duration with Alpine.js
April 10, 2022
Alpine.js includes a bunch of really handy transition helpers for quickly creating transitions for elements when they show and hide.
For example:
<!-- This will scale up and fade in. -->
<div x-show="show" x-transition></div>
<!-- This will just fade in. -->
<div x-show="show" x-transition.opacity></div>
By default, these animations are 150 milliseconds long when entering and 75 milliseconds long when exiting.
However, you can customize them by using the duration
modifier:
<div x-show="show" x-transition.duration.400ms></div>
<div x-show="show" x-transition.opacity.duration.400ms></div>
Or you can even specify different durations for entering and leaving:
<div
x-show="show"
x-transition:enter.opacity.duration.400ms
x-transition:leave.opacity.duration.150ms
></div>
Subscribe to my newsletter!
A weekly round-up of new blog posts and updates to projects I’m working on.