I am currently working on creating a responsive navigation bar in nuxt3/vue.
<template>
<nav
class="flex justify-between items-center w-[92%] mx-auto gap-4 border border-2 border-black p-2"
>
<div>
<span class="text-xl">Javascript</span>
</div>
<div
class="absolute md:relative p-4 left-0 bg-yellow-500 left-0 w-full top-[9%] md:top-[0%] transition-all duration-300"
:class="{ hidden: isActive }"
>
<ul
class="flex md:flex-row flex-col items-center gap-[4vw] justify-center text-xl"
>
<li>
<NuxtLink> 1 </NuxtLink>
</li>
<li>
<NuxtLink> 2 </NuxtLink>
</li>
<li>
<NuxtLink> 3 </NuxtLink>
</li>
</ul>
</div>
<div class="flex flex-row items-center justify-center text-center gap-4">
<span class="flex items-center justify-center text-center text-xl"
>Find us!
</span>
<div class="md:hidden cursor-pointer">
<Icon
@click="toggleMenu"
:name="
isActive
? 'material-symbols:format-list-bulleted-rounded'
: 'material-symbols:close'
"
size="40px"
/>
</div>
</div>
</nav>
</template>
<script setup>
import "animate.css";
import { ref } from "vue";
const isActive = ref(true);
function toggleMenu() {
isActive.value = !isActive.value;
}
</script>
However, I'm facing issues with the transition after clicking the menu icon. I have tried using different tags and even included the "animate.css" library. Can I apply transitions to the display property or only to opacity (as tailwind creators may have intended)? Why isn't animate.css working if not using Tailwind CSS? I aim for a smooth, simple, and clean transition effect.