I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

Question

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code:

{/* Mobile Menu */}
        <div className="lg:hidden">
          <button className="flex items-center w-8" onClick={toggleMenu}>
            {isMobileMenuOpen ? (
              <button className="w-full h-full">
                <AiOutlineUp className="w-full h-full" />
              </button>
            ) : (
              <button className="w-full h-full">
                <AiOutlineDown className="w-full h-full" />
              </button>
            )}
          </button>
        </div>
        {/* Desktop Menu */}
        <div className="hidden lg:block">
          <ul className="flex flex-row gap-8 text-[22px]">
            {renderNavLinks(navLinks)}
          </ul>
        </div>
      </div>
      {/* Mobile Menu Items */}
      <div
        className={`mobileMenu lg:hidden p-10 bg-[#101010] ${
          isMobileMenuOpen ? "selected" : "dismiss"
        }`}
      >
        {isMobileMenuOpen && (
          <ul className="flex flex-col gap-4 text-[22px]">
            {renderNavLinks(navLinks)}
          </ul>
        )}
      </div>

Moreover, I have implemented a standard css with slide-in and slide-out keyframe animations. Surprisingly, it is functioning perfectly when I open the mobile menu button. However, when I try to close it, the animation somehow fails to work as expected. Instead, it abruptly jumps to the closed state without any transition. I've attempted various potential solutions such as modifying the animation using transform or employing a timeout handler; however, none of them seem to resolve the issue. Do you have any suggestions or ideas on how I can possibly solve this problem?

css reactjs typescript css-animations

Answer 1

Answer №1

Here's a unique solution for you.

import { useState, useEffect } from 'react';

const ResponsiveMenu = ({ menuItems }) => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const mobileMenuRef = useRef(null);

  const toggleMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  const closeMenu = () => {
    const menu = mobileMenuRef.current;
    menu.addEventListener('animationend', () => {
      setIsMobileMenuOpen(false);
    }, { once: true });
    menu.classList.add('slideout');
  };

  const renderMenuItems = (menuItems) => {
    return menuItems.map((item) => (
      <li key={item.id}>
        <a href={item.link}>{item.label}</a>
      </li>
    ));
  };

  useEffect(() => {
    // Some additional functionality can be added here
    console.log("Responsive Menu Component is rendered.")
  }, []);

  return (
    <div className="responsive-menu">
      {/* Mobile Menu */}
      <div className="lg:hidden">
        <button className="menu-toggle-btn" onClick={toggleMenu}>
          {isMobileMenuOpen ? (
            <button className="arrow-up-btn">
              <i className="fa fa-arrow-up" />
            </button>
          ) : (
            <button className="arrow-down-btn">
              <i className="fa fa-arrow-down" />
            </button>
          )}
        </button>
      </div>
      {/* Desktop Menu */}
      <div className="hidden lg:block">
        <ul className="desktop-menu">
          {renderMenuItems(menuItems)}
        </ul>
      </div>
      {/* Mobile Menu Items */}
      <div
        className={`mobile-menu lg:hidden ${
          isMobileMenuOpen ? "animate-slidein selected" : "animate-slideout dismiss"
        }`}
        ref={mobileMenuRef}
      >
        {isMobileMenuOpen && (
          <ul className="mobile-menu-items">
            {renderMenuItems(menuItems)}
          </ul>
        )}
        {isMobileMenuOpen && (
          <button className="close-btn" onClick={closeMenu}>
            <i className="fa fa-times" />
          </button>
        )}
      </div>
    </div>
  );
};

Answer 2

Here's a unique solution for you.

import { useState, useEffect } from 'react';

const ResponsiveMenu = ({ menuItems }) => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const mobileMenuRef = useRef(null);

  const toggleMenu = () => {
    setIsMobileMenuOpen(!isMobileMenuOpen);
  };

  const closeMenu = () => {
    const menu = mobileMenuRef.current;
    menu.addEventListener('animationend', () => {
      setIsMobileMenuOpen(false);
    }, { once: true });
    menu.classList.add('slideout');
  };

  const renderMenuItems = (menuItems) => {
    return menuItems.map((item) => (
      <li key={item.id}>
        <a href={item.link}>{item.label}</a>
      </li>
    ));
  };

  useEffect(() => {
    // Some additional functionality can be added here
    console.log("Responsive Menu Component is rendered.")
  }, []);

  return (
    <div className="responsive-menu">
      {/* Mobile Menu */}
      <div className="lg:hidden">
        <button className="menu-toggle-btn" onClick={toggleMenu}>
          {isMobileMenuOpen ? (
            <button className="arrow-up-btn">
              <i className="fa fa-arrow-up" />
            </button>
          ) : (
            <button className="arrow-down-btn">
              <i className="fa fa-arrow-down" />
            </button>
          )}
        </button>
      </div>
      {/* Desktop Menu */}
      <div className="hidden lg:block">
        <ul className="desktop-menu">
          {renderMenuItems(menuItems)}
        </ul>
      </div>
      {/* Mobile Menu Items */}
      <div
        className={`mobile-menu lg:hidden ${
          isMobileMenuOpen ? "animate-slidein selected" : "animate-slideout dismiss"
        }`}
        ref={mobileMenuRef}
      >
        {isMobileMenuOpen && (
          <ul className="mobile-menu-items">
            {renderMenuItems(menuItems)}
          </ul>
        )}
        {isMobileMenuOpen && (
          <button className="close-btn" onClick={closeMenu}>
            <i className="fa fa-times" />
          </button>
        )}
      </div>
    </div>
  );
};

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

Answer №1

Similar questions

Converting a JavaScript function to work in TypeScript: a step-by-step guide

Troubleshooting issues with media queries related to device pixel ratio

Tips on combining react material ui Link and react router Link for seamless integration

How can I implement a feature in React.js where clicking a button triggers a Canvas to draw something?

Creating a script to open multiple URLs in HTML and JavaScript

In Deno, it is possible to confirm that a variable is an instance of a String

Issue encountered when submitting form: Error identified as "Unexpected string expression without template curly in string"

The responsive menu refuses to appear

Tips on updating primeng Panel Menu appearance with scss

Securing paths using Next.js and Express

Looking for a solution to resolve the issue "ERROR TypeError: Cannot set property 'id' of undefined"?

The certificate leaf_signature is not being recognized by Node

Obtaining Data from a Database Using Angular

The customization feature in Mui v5 is unable to implement the color specified in the

Discovering the children of the target DOM element in React

The problem with clearing floats in IE7 (as well as 6)

Trouble arises with the MUI 5 date picker when inputFormat is included

Jest - verifying the invocation of local storage within an async function that is currently being mocked

Using Typescript with Styled-Components and Styled-System: Unable to find a matching overload for this function call

Issue with blur event for Select component in MUI DataGridPro / DataGridPremium during header rendering