[Vuejs]-Transition element not working in hamburger menu with tailwind css and nuxt/vue

by

1👍

✅

No transitions happen on an element on the same render frame that its display property changes from or to none. If you still want some transition to happen, consider toggling between visibility: hidden and visibility: visible to have the element not be interactable and interactable respectively. This then allows you to transition between opacity for example:

const { ref } = Vue;

Vue.createApp({
  setup() {
    const isActive = ref(true);
    function toggleMenu() {
      isActive.value = !isActive.value;
    }
    
    return {
      isActive,
      toggleMenu,
    };
  },
}).mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.prod.min.js" integrity="sha512-39BSQXI5q1XlvVhLfFRidKG8KM6Tr6VS/XSnNo6N/A0ZXexHCeoUI/s+ulujQy3UREjoLNrMnFat8VI0mMugWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div id="app">
  <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="{ 'invisible opacity-0': !isActive }"
    >
      <ul
        class="flex md:flex-row flex-col items-center gap-[4vw] justify-center text-xl"
      >
        <li>
          <a> 1 </a>
        </li>
        <li>
          <a> 2 </a>
        </li>
        <li>
          <a> 3 </a>
        </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"
          v-text="
            isActive
              ? 'material-symbols:format-list-bulleted-rounded'
              : 'material-symbols:close'
          "
          size="40px"
        ></icon>
      </div>
    </div>
  </nav>
</div>

You could also consider using the Vue built-in <Transition> component for removing/add elements into the DOM which would be a similar behavior to what display: none does:

const { ref } = Vue;

Vue.createApp({
  setup() {
    const isActive = ref(true);
    function toggleMenu() {
      isActive.value = !isActive.value;
    }
    
    return {
      isActive,
      toggleMenu,
    };
  },
}).mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.prod.min.js" integrity="sha512-39BSQXI5q1XlvVhLfFRidKG8KM6Tr6VS/XSnNo6N/A0ZXexHCeoUI/s+ulujQy3UREjoLNrMnFat8VI0mMugWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div id="app">
  <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>
    <Transition
      enter-from-class="opacity-0"
      leave-to-class="opacity-0"
    >
      <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"
        v-if="isActive"
      >
        <ul
          class="flex md:flex-row flex-col items-center gap-[4vw] justify-center text-xl"
        >
          <li>
            <a> 1 </a>
          </li>
          <li>
            <a> 2 </a>
          </li>
          <li>
            <a> 3 </a>
          </li>
        </ul>
      </div>
    </Transition>
    <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"
          v-text="
            isActive
              ? 'material-symbols:format-list-bulleted-rounded'
              : 'material-symbols:close'
          "
          size="40px"
        ></icon>
      </div>
    </div>
  </nav>
</div>
👤Wongjn

Leave a comment