[Mise] Control enter and leave transitions with the `x-show.transition` modifier in 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.

 

<div x-data="tabs()">
  <div>

    <template x-for="tab in tabs" :key="tab.id">
      <button @click="activeTab = tab.id" x-text="tab.title" :class="{'active': getActiveStatus(tab.id)}"></button>
    </template>
  </div>
  <div>
    <template x-for="tab in tabs" :key="tab.id">
      <!-- you can dot chaining modifier -->
      <div x-show.transition.in.duration.200.origin.top.right="getActiveStatus(tab.id)">
        <p x-text="tab.text"></p>
      </div>
    </template>
  </div>
</div>

<script>
  function tabs() {
    return {
      activeTab: 0,
      tabs: [
        {id: 0, title: "Tab 1", text: "I am the content of tab number one, and I think I just won! 🏆"},
        {id: 1, title: "Tab 2", text: "Heya! I root for number two, and so should you! ❤️"},
        {id: 2, title: "Tab 3", text: "Haha nice one, but I am number three, and now it's all about me! 😎"},
      ],
      getActiveStatus(id) { return this.activeTab === id }
    }
  }
</script>