Disable a specific transition with TailwindCSS

Question

I implemented this navbar using tailwindCSS, the transition is looking good when toggling the navbar (mobile version) and when entering large screen, but see the problem when entering small screen. Here are recordings, click on the eye to view the videos directly in the browser.

• https://share.skwal.net/share/A0NDI2M

Is there a way to remove the ugly transition while keeping the two others? Any help would be appreciated, thanks.

Here is my code.

<template>
    <header class="
    select-none flex sticky top-0 
    items-center border-b-gray-950  *
    text-white bg-gray-800 justify-center z-50 mb-5 shadow">
        <nav class="
        bg-gray-800 flex justify-between 
        items-center px-5 py-3 w-full max-w-4xl">
            <img src="/img/logo.png" class="max-h-10" />
            <div id="nav_buttons" :class="`
            ${navOpened ? '' : '-translate-y-full'}
            space-y-1 md:space-x-3 md:space-y-0
            flex flex-col md:flex-row
            top-full w-full bg-gray-800 
            left-0 pb-7 md:pb-0
            pl-5 md:pl-0
            pt-5 md:pt-0
            absolute md:static
            -z-10 md:z-auto transition
            duration-300
            md:transform-none
            md:justify-end`">
            
                <NavButton/>
                <NavButton/>
                <NavButton/>
                <NavButton/>
            </div>
            <Icon @click="toggleNav" class="cursor-pointer h-6 w-6 block md:!hidden" :name="navIcon"/>
        </nav>
    </header>
</template>

<script setup>
import { ref } from 'vue';
const navOpened = ref(false);

const toggleNav = () => 
    navOpened.value = !navOpened.value;

const navIcon = computed(() => navOpened.value ? 'oui:cross' : 'iconamoon:menu-burger-horizontal-thin');
</script>