Alpine fade

Simple demo to fade an element with with Alpine.js

by Ben

HTML

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css">
<div x-data="{animate: false}">
  <button @click="animate = (animate) ? false : true" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 ml-4">
    Toggle Fade
  </button>

  <div x-show="animate" x-transition:enter="transition ease-out duration-1000" 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-1000" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" class="rounded shadow-md p-2 m-4 w-1/4 text-center bg-gray-700 text-white">
    Faded by Alpine.js
  </div>
</div>