Alpine.js includes a bunch of really handy transition helpers for quickly creating transitions for elements when they show and hide.
<!-- 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
<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: