overlay navbar with transition in React - css

Question

I'm having issues with an overlay navbar which is supposed to slide in from top.
Not sure why, but if i click the hamburger menu, the proper css class is applied, but the transition doesn't occur (it acts like a show/hidden).
However, if i change the top property value from the dev tool, it works as expected.
what am i missing?
Here's the react component
import React, { useState } from "react";
import NavMenuIcon from "../../public/svg/nav.svg";
import styles from '../../styles/Navbar.module.scss'
import Link from 'next/link'
function Navbar() {
const [menu, setToggle] = useState(false);
const toggleMenu = () => setToggle(!menu);
const Menu = props => (
<div className={ props.toggle ? `${styles.menu__container} ${styles.toggle}` : `${styles.menu__container}` }>
<div className={styles.menu__content}>
<ul className={styles.menu__list}>
<li className={styles.menu__item} onClick={toggleMenu}> <Link href="/"><span>Home</span></Link></li>
<li className={styles.menu__item} onClick={toggleMenu}> <Link href="/services"><span>Services</span></Link></li>
<li className={styles.menu__item} onClick={toggleMenu}> <Link href="/services#contact"><span>Contact</span></Link></li>
</ul>
</div>
</div>
);
return (
<div className={styles.navbar}>
<i>Meuartelie</i>
<NavMenuIcon className={styles.hamburger} onClick={toggleMenu} />
<Menu toggle={menu}></Menu>
</div>
);
}
export default Navbar;
and here's the css
#import './variables.scss';
.navbar {
box-sizing: border-box;
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5%;
z-index: 5;
}
.menu__container {
font-family: 'Jokerman Std';
position: absolute;
top: -300px;
left: 0;
width: 100vw;
height: 300px;
z-index: -1;
background-image: url("../public/png/welcome_mobile.png");
background-color: black;
background-size: cover;
overflow: hidden;
transition: 850ms;
}
.menu__content {
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20%;
}
.menu__container.toggle {
top: 0;
transition: all 1s ease-in;
}
.menu__list {
width: 80%;
text-align: center;
list-style: none;
padding: 0px;
line-height: 2;
margin: 0px;
margin-bottom: 20px;
}
.menu__item {
transition: padding-left .7s ease, color .7s ease;
/* underline css*/
text-decoration: none;
position: relative;
}
.menu__item:hover {
color: $base-color;
padding-left: 20px;
cursor: pointer;
}
.menu__item:after {
content: '';
height: 2px;
/* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
bottom: 0px;
/* center - (optional) use with adjusting width */
margin: 0 auto;
left: 0;
right: 0;
width: 40%;
background: #fff;
/* optional animation */
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
/* optional hover classes used with anmiation */
.menu__item:hover:after {
background: $base-color;
}
.hamburger {
z-index: 1000;
cursor: pointer;
}

Answer 1

This has to do with how react determines what to rerender.
Whenever react determines a new reference in the render tree, it automatically rerenders that element.
CSS transitions on the other hand will transform from a starting state, to the end state.
If the start and end are the same, no transition is applied.
So what's actually happening:
The button gets clicked.
The render tree is modified. specifically const Menu is assigned a new reference.
React removed any old elements from the dom, in this case <div class="menu__container">
React adds the new elements to the dom, in this case <div class="menu_container toggle">
the browser renders the element and applies the initial css rules. the element receives the top:0 as the initial state. there is no transition since the old element was removed.
How to fix it:
Make sure you React knows we're still rendering the same element, so it will update the existing dom element, instead of removing and adding a new element.
several ways to do this, the recommended way is to extract the element from the render function. The reference becomes static then
//extracted from render function:
const Menu = (props) => (
<div key='1' className={ props.toggle ? `menu__container toggle` : `menu__container` }>
<div className={'menu__content'}>
<ul className={'menu__list'}>
<li className={'menu__item'} onClick={props.toggleMenu}> <Link href="/"><span>Home</span></Link></li>
<li className={'menu__item'} onClick={props.toggleMenu}> <Link href="/services"><span>Services</span></Link></li>
<li className={'menu__item'} onClick={props.toggleMenu}> <Link href="/services#contact"><span>Contact</span></Link></li>
</ul>
</div>
</div>
);
function Navbar() {
const [menu, setToggle] = useState(false);
const toggleMenu = () => setToggle(!menu);
return (
<div className={'navbar'}>
<i>Meuartelie</i>
<button className={'hamburger'} onClick={toggleMenu} >☰</button>
<Menu toggle={menu} toggleMenu={toggleMenu}></Menu>
</div>
);
}
Sometimes its inconvenient to extract the component from the render function, for example If the components is dynamically created/determined.
You can then use a the hook useMemo to tell react to store the reference, and only recalulate the value if a prop in the dependency-array changes.
function NavbarAndMenuMemoized() {
const [menu, setToggle] = useState(false);
const toggleMenu = () => setToggle(!menu);
// useMemo will not recalculate Menu each render, instead it will keep the same reference for Menu.
const Menu = useMemo(()=>{
return(props) => (
<div key='1' className={ props.toggle ? `menu__container toggle` : `menu__container` }>
<div className={'menu__content'}>
<ul className={'menu__list'}>
<li className={'menu__item'} onClick={toggleMenu}> <Link href="/"><span>Home</span></Link></li>
<li className={'menu__item'} onClick={toggleMenu}> <Link href="/services"><span>Services</span></Link></li>
<li className={'menu__item'} onClick={toggleMenu}> <Link href="/services#contact"><span>Contact</span></Link></li>
</ul>
</div>
</div>
);
}, [])
return (
<div className={'navbar'}>
<i>Meuartelie</i>
<button className={'hamburger'} onClick={toggleMenu} >☰</button>
<Menu toggle={menu} ></Menu>
</div>
);
}
live demo Example