Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay

JeffreyWay/example.html Secret

Created June 26, 2020 20:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JeffreyWay/9c97f838b4cce367490c1af66c92f0cf to your computer and use it in GitHub Desktop.
Save JeffreyWay/9c97f838b4cce367490c1af66c92f0cf to your computer and use it in GitHub Desktop.
Download ZIP
Alpine Transitions 101
Raw
example.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alpine Examples</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/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: true }">
<div class="w-12 h-12">
<div class="bg-green-400 w-full h-full"
x-show="show"
x-transition:enter="transition transform duration-1000"
x-transition:enter-start="opacity-0 scale-125"
x-transition:leave="transition duration-200"
x-transition:leave-end="opacity-0"
></div>
</div>
<button @click="show = ! show">Toggle</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment