React transition for overlaying a navigation bar

Question

React transition for overlaying a navigation bar

I'm encountering an issue with an overlay navbar that should slide in from the top.

For some reason, when I click the hamburger menu, the correct CSS class is applied but the transition doesn't happen (it behaves like a show/hide effect). However, if I manually change the 'top' property value using the dev tools, it works as intended.

What could be causing this behavior?

Here's the React component code:


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 corresponding 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;
}

css reactjs next.js css-transitions

Answer 1

Answer №1

React's rerendering process is based on detecting new references in the render tree, prompting automatic re-renders for those elements.
In contrast, CSS transitions transition from one state to another; if the start and end states are the same, no transition occurs.

Here's what really happens:

A button click triggers
The render tree is modified with a new reference assigned to const Menu
Old elements are removed from the DOM, like
```
<div class="menu__container">
```
New elements are added to the DOM, such as
```
<div class="menu_container toggle">
```
The browser renders the element applying initial CSS rules; top:0 serves as the initial state without transition due to the removal of the old element.

How to resolve it:
Ensure React recognizes that the same element is being rendered to update the existing DOM element rather than adding/removing a new one.
Various methods can achieve this, with extracting the component from the render function being the recommended approach for maintaining a static reference.

//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>
  );
}

Situations may arise where extracting the component isn't feasible, especially when components are dynamically created/determined.
In such cases, the hook useMemo comes in handy to instruct React to store the reference and only recalculate if a prop in the dependency array changes.

function NavbarAndMenuMemoized() {
  const [menu, setToggle] = useState(false);
  const toggleMenu = () => setToggle(!menu);
 
  // useMemo retains the same reference for Menu instead of recalculating each render.
  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>
  );
}

Check out live demo Example here

Answer 2

React's rerendering process is based on detecting new references in the render tree, prompting automatic re-renders for those elements.
In contrast, CSS transitions transition from one state to another; if the start and end states are the same, no transition occurs.

Here's what really happens:

A button click triggers
The render tree is modified with a new reference assigned to const Menu
Old elements are removed from the DOM, like
```
<div class="menu__container">
```
New elements are added to the DOM, such as
```
<div class="menu_container toggle">
```
The browser renders the element applying initial CSS rules; top:0 serves as the initial state without transition due to the removal of the old element.

How to resolve it:
Ensure React recognizes that the same element is being rendered to update the existing DOM element rather than adding/removing a new one.
Various methods can achieve this, with extracting the component from the render function being the recommended approach for maintaining a static reference.

//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>
  );
}

Situations may arise where extracting the component isn't feasible, especially when components are dynamically created/determined.
In such cases, the hook useMemo comes in handy to instruct React to store the reference and only recalculate if a prop in the dependency array changes.

function NavbarAndMenuMemoized() {
  const [menu, setToggle] = useState(false);
  const toggleMenu = () => setToggle(!menu);
 
  // useMemo retains the same reference for Menu instead of recalculating each render.
  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>
  );
}

Check out live demo Example here

React transition for overlaying a navigation bar

Answer №1

Similar questions

Modify the SVG height using JavaScript and CSS

the state hooks are failing to update the state when there is a change

Navigation in PHP webpages and determining the active page

Guide to adding an additional border within a div element

Unable to utilize container-fluid on Chrome and tablet-sized screen due to compatibility issues

Leveraging flask/jinja for incorporating dynamic content without the need for an HTML table

Storing and retrieving cookies in ReactJS for data persistence

Is it possible to extract the CSS path of a web element using Selenium and Python?

Does combining react-bootstrap with plain bootstrap create a negative outcome?

How can I align icons to the right and display text below each one?

Ways to update the icon in reactstrap dropdown menu?

Element with absolute positioning inside a relative parent does not interfere with other elements outside of the parent

Deploying ReactJS on a local server: A step-by-step guide

What could be causing the defaultOpen feature to function on my code simulator but fail to work on my website?

What is the best way to create separate arrays for every element in my object, containing a total of four arrays to efficiently produce a weekly forecast?

How can data be transferred from props to state in React Native?

Changing between two images using HTML and CSS

Tips for bypassing index.d.ts files when searching for definitions

Is it possible in JQuery for the mouseup event to not be triggered if the left click button is held down for 10 seconds and then released suddenly, causing the mouse to move too quickly?

Vertical table header in ASP.NET MVC 5