I’ve following code and I’m trying to get the transition to work, but could not. Seems something is wrong and I could not figure it out.

<div id="nav-links" class="fixed bg-bg-white overflow-scroll h-screen min-w-[80vw] left-[-100%] top-0 p-3 z-40 hidden transition-all duration-1000 ease-in">
</div>


 <div class="flex flex-col gap-1 cursor-pointer" onclick="navOpen()">
    <div class="w-7 h-1 bg-black rounded-md"></div>
    <div class="w-8 h-1 bg-black dounded-md"></div>
    <div class="w-6 h-1 bg-black rounded-md"></div>
</div>

Below is the JS.

function navOpen() {
    
    const Overlay = document.getElementById('overlay');
    const NavLinks = document.getElementById('nav-links');

    document.body.classList.add('h-screen', 'overflow-hidden');
    Overlay.classList.remove('hidden');
    NavLinks.classList.remove('hidden', 'left-[100%]');
    NavLinks.classList.add('left-0');
}