I followed some tutorial about AlpineJS by Andreas Jud on Youtube. I came to the part to animate dropdown menu button. I've tried to put the leaving animation. Here is the code :
<div x-show="dropdownOpen" x-cloak class="absolute right-0 bg-white text-black shadow rounded-lg w-40 p-2 z-20"
x-transition:enter="duration-1000 ease-out"
x-transition:enter-start="opacity-0 -translate-y-5 scale-90"
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
x-transition:leave="duration-1000 ease-out"
x-transition:leave-start="opacity-100 translate-y-0 scale-100"
x-transition:leave-end="opacity-0 -translate-y-5 scale-50"
>
So far, what I know is that scale supposed to change the size right ? For resizing element, and translate is for kind of like moving. But when I changed it to this following value I get some different behaviour:
- scale-70 : the scaling doesnt happened, only the translation does
- scale-50 : the translation doesnt happened only the scaling does
So it almost like a new animation. What happened here ? Did I do something wrong here ? Thanks y'all
Full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/output.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="https://img.icons8.com/stickers/100/fire-element.png" type="image/png">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<title>Tutorial</title>
<style type="text/tailwindcss">
h1 {
font-family: 'Lobster';
}
</style>
<body class="bg-gray-200">
<header class="bg-gray-800 h-20 text-white flex items-center justify-between px-8 sticky top-0 z-50">
<logo>
<a href="/" class="flex items-center gap-1">
<img class="h-8 -mt-1" src="https://img.icons8.com/stickers/100/fire-element.png" alt="fire-element"/>
<span>Awesome</span>
</a>
</logo>
<nav>
<ul class="flex items-center navitems">
<li><a href="/" >Home</a></li>
<li><a href="/">Create Post</a></li>
<li x-data="{ dropdownOpen: false }" class="relative">
<a x-on:click="dropdownOpen = !dropdownOpen" x-on:click.away="dropdownOpen=false" class="cursor-pointer select-none">
<img class="h-8 rounded-full object-cover bg-teal-200" src="https://img.icons8.com/stickers/96/bart-simpson.png" alt="bart-simpson"/>
<img class="w-4" src="https://img.icons8.com/plasticine/64/expand-arrow.png" alt="expand-arrow"/>
Bart
</a>
<!-- Dropdown menu -->
<div x-show="dropdownOpen" x-cloak class="absolute right-0 bg-white text-black shadow rounded-lg w-40 p-2 z-20"
x-transition:enter="duration-1000 ease-out"
x-transition:enter-start="opacity-0 -translate-y-5 scale-90"
x-transition:enter-end="opacity-100 translate-y-0 scale-100"
x-transition:leave="duration-1000 ease-out"
x-transition:leave-start="opacity-100 translate-y-0 scale-100"
x-transition:leave-end="opacity-0 -translate-y-5 scale-90"
>
<ul class="hoverlist [&>li>a]:justify-end">
<li><a href="">My Profile</a></li>
<li><a href="">Log Out</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
</body>
</html>
Here is my input.css:
:root {
--primary: rgb(88, 40, 244);
--primary-hover: rgb(69, 29, 200);
--font1: "Lobster", sans-serif;
}
@layer components {
.bg-primary {
background-color: var(--primary);
}
.bg-primary-hover:hover {
background-color: var(--primary-hover);
}
.hoverlist > * {
@apply hover:bg-gray-100 rounded-md transition duration-150;
}
.hoverlist > * > a {
@apply p-2 flex block items-center;
}
.highlight {
@apply !bg-indigo-100;
}
[x-cloak] {
display: none !important;
}
}
h1 {
font-size: 4rem;
line-height: 1.2;
font-weight: bold;
margin-bottom: 1rem;
font-family: var(--font1);
}
h2 {
font-size: 1.5rem;
font-weight: bold;
line-height: 2rem;
margin-bottom: 0.75rem;
}
.font1 {
font-family: var(--font1);
}
.card {
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
border-radius: 1rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
background-color: white;
padding-bottom: 1rem;
}
.navitems > li > a {
@apply h-12 px-4 hover:bg-gray-700 rounded-2xl flex items-center gap-4;
}
.headerhero {
@apply text-7xl leading-tight font-bold mb-4;
}
.buttonhero {
@apply bg-primary hover:bg-primary inline-flex flex-wrap items-center justify-center flex-shrink-0 text-center rounded-md cursor-pointer px-4 min-h-10 font-semibold shadow-md transition-transform duration-200 active:scale-95 text-white bg-primary hover:bg-primary;
}