CODEWITHSUNDEEP
javascriptcssreactjstailwind-cssbackdrop
Harley Zhang
Harley Zhang

Reputation: 43

CSS transition not working for backdrop-blur

My React/Tailwind app has a mobile menu popup for screens less than 768px wide which uses the Tailwind properties backdrop-blur to blur out everything behind the menu items. I have a transition-all with duration-[400ms] which works to fade in the menu when the button is pressed but there is no transition effect when it is closed.

Below is the code

import { useState, useEffect } from "react";
import useMediaQuery from "../hooks/useMediaQuery";

const Navbar = ({ selectedPage, setSelectedPage }) => {
    const [isMenuToggled, setIsMenuToggled] = useState(false);
    const isAboveSmallScreens = useMediaQuery("(min-width: 768px)");

    const handleToggleMenu = () => {
        setIsMenuToggled(!isMenuToggled);
    };

    return (
        <nav className={`${navbarBackground} text-white bg-darkgrey z-40 w-full fixed top-0 py-3`}>
            <div className='flex items-center justify-between mx-auto md:w-[1000px] px-5'>
                <img src={logo} alt="harley-zhang-logo" className="h-6 z-50" />

                {isAboveSmallScreens ? "/* content for desktop menu */" : (
                    <button
                        className="flex justify-between gap-16 z-50"
                        onClick={handleToggleMenu}
                    >
                        {isMenuToggled ? "Close" : "Menu"}
                    </button>
                )}
                <div className={`fixed right-0 bottom-0 h-full w-full transition-all duration-[400ms] transform ${isMenuToggled ? 'opacity-100 bg-darkgrey bg-opacity-50 backdrop-blur-xl' : 'opacity-0'}`}>
                </div>
            </div>
        </nav>
    );
};

export default Navbar;

How can I ensure there is a transition both in and out?

Upvotes: 0

Views: 72

Answers (0)

Related Questions