Series Intro - Beginner Level Alpine JS

Update a count state value with the x-on event listener directive in Alpine JS

Toggle visibility and styles based on state with `x-show` and `x-bind` in Alpine JS

Iterate through data with the `x-for` attribute in Alpine JS

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

Keep a DOM input and state value in sync with the `x-model` directive in Alpine JS

Focus an input field on button click with `x-ref` and the `$refs` property in Alpine JS

Focus in input field on page load with `x-init` in Alpine JS

Refetch API data when a state value changes with the `$watch` property in Alpine JS

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

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.

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

Share this video with your friends

Course

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS