Created
June 26, 2021 13:04
-
-
Save RomkaLTU/f8f777443e91ff543245d2b554ccad1b to your computer and use it in GitHub Desktop.
AlpineJS Grid filtering with transitions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://codepen.io/RomkaLTU/pen/zYwOBBq