Control enter and leave transitions with the `x-show.transition` modifier in Alpine JS

Share this video with your friends

Send Tweet
Published 2 years ago
Updated a year ago

In this lesson, we smoothen the transitions between tabs by applying a transition modifier to our x-show directive.

We see how we can ignore the leaving elements, and focus the animation on the entering elements. We tweak the transition duration and origin by chaining additional modifiers to our x-show directive.