AlpineJS Grid filtering with transitions

index.html

<div x-data="filter" class="h-screen flex flex-col items-center mt-8">
  <ul class="-mx-5 flex flex-wrap justify-center space-x-8 text-14px font-josefin font-bold text-gray-2">
    <li><a href="#" @click.prevent="selectColor()" class="text-gray-500">All</a></li>
    <li><a href="#" @click.prevent="selectColor('red')" class="text-red-500">Red</a></li>
    <li><a href="#" @click.prevent="selectColor('blue')" class="text-blue-500">Blue</a></li>
    <li><a href="#" @click.prevent="selectColor('green')" class="text-green-500">Green</a></li>
  </ul>
  <div class="mt-8 max-w-md">
    <ul class="sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-4 sm:space-y-0 lg:grid-cols-3 lg:gap-x-4">
      <template x-for="color in colors">
        <li 
          x-show="!selected || (selected === color && !tmpHide)"
          x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="opacity-0 transform scale-90"
          x-transition:enter-end="opacity-100 transform scale-100"
          x-transition:leave="transition ease-in duration-300"
          x-transition:leave-start="opacity-100 transform scale-100"
          x-transition:leave-end="opacity-0 transform scale-90"
          :class="`bg-${color}-500`" 
          class="w-20 h-20">
        </li>
      </template>
    </ul>
  </div>
</div>

index.js

import Alpine from "https://cdn.skypack.dev/alpinejs@3.1.1";

Alpine.data('filter', () => ({
  selected: false,
  tmpHide: false,
  colors: [
    'red',
    'blue',
    'blue',
    'red',
    'green',
    'red',
    'green',
    'blue',
    'red',
  ],
  selectColor(color = false) {
    this.tmpHide = true
    this.selected = color

    setTimeout(() => {
      this.tmpHide = false
    }, 300)
  }
}))

Alpine.start()

https://codepen.io/RomkaLTU/pen/zYwOBBq