Navbar Drop Down Menu Transition Only Working One Way

Question

I've been working on a NavBar in reactjs for my website, and I've encountered some issues where the transition of the drop down menu is only working correctly when it's closing. When the drop down menu is opened, the contents appear immediately and then the contents below transition down.

I initial had height: auto under .nav-open , but I've changed that height to max-height . That fixed the lack of the transition, but I still have the one way transition issue.

Relevant Code

NavBar.js

import React, { useState } from 'react';
import Slide from 'react-reveal/Slide';

// CSS import statements
import '../css/NavBar.css'

function NavBar() {
    const [open, setOpen] = useState(false);

    return(
        <Slide top>
                <nav>
                    <div className='navbar-container'>
                        <h4 className='logo'>Daniel Zhang</h4>
                        <div className='toggle-button' onClick={() => setOpen(!open)}>
                            <div className='bar' />
                            <div className='bar' />
                            <div className='bar' />
                        </div>
                    </div>
                    <div id='nav-links' className={open ? 'nav-open' : 'nav-collasped'}>
                        <a href='/'>Home</a>
                        <a href='/about'>About</a>
                        <a href='/blog'>Blog</a>
                        <a href='/contact'>Contact</a>
                    </div>
                </nav>
            </Slide>
        );
}

export default NavBar;

NavBar.js

/* Default Style (Smartphone) */ 

nav * {
    margin: 0;
    padding: 0;
}

.navbar-container {
    background-color: hotpink;
    display: flex;
    justify-content: space-between;
    padding: 20px 20px;
    align-items: center;
}

.logo {
    color: black;
    font-size: 20px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.toggle-button {
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    height: fit-content;
    transition: all 0.5s ease;
}

.toggle-button .bar {
    background-color: grey;
    border-radius: 10px;
    margin: 4px;
    height: 4px;
    width: 30px;
}

.toggle-button:hover {
    background-color: black;
}

#nav-links {
    transition: all 2s ease;
}

.nav-collasped {
    max-height: 0px;
    overflow: hidden;
}

.nav-open {
    max-height: 100px;
    overflow: visible;
}

#nav-links a{
    color: grey;
    display: block;
    font-weight: bold;
    background-color: hotpink;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s ease;
}

#nav-links a:hover {
    background-color: blue;
    color: black;
}

/* Responsive Mode */

@media screen and (min-width: 768px) {
    nav {
        align-items: center;
        background-color: blueviolet;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
    }
    
    
    .toggle-button {
        display: none;
    }

    #nav-links {
        display: flex;
        height: auto;
    }
}

Answer 1

switching your overflow from hidden to visible disrupts the transition; set both nav-collapsed and nav-open to

overflow: hidden;