Created
June 29, 2020 14:08
-
-
Save JeffreyWay/0aff02a63ffd87b59b1a343fee7a803d 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