-
-
Save carpincho/2ffefd4cc013f520b1b72135ff1505b7 to your computer and use it in GitHub Desktop.
Alpine.js Transition demo
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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Alpine Examples</title> | |
| <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" | |
| defer | |
| ></script> | |
| <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" | |
| rel="stylesheet" | |
| > | |
| </head> | |
| <body class="grid items-center justify-center h-screen"> | |
| <div x-data="{ show: false }" @click.away="show = false"> | |
| <button @click="show = ! show">Links</button> | |
| <div class="absolute bg-black text-white py-2 rounded mt-1" | |
| x-show="show" | |
| x-transition:enter="transition duration-200 transform ease-out" | |
| x-transition:enter-start="scale-75" | |
| x-transition:leave="transition duration-100 transform ease-in" | |
| x-transition:leave-end="opacity-0 scale-90" | |
| > | |
| <a class="block hover:bg-gray-800 text-xs py-px px-4" href="#">Edit</a> | |
| <a class="block hover:bg-gray-800 text-xs py-px px-4" href="#">Delete</a> | |
| <a class="block hover:bg-gray-800 text-xs py-px px-4" href="#">Report Spam</a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment