Переход CSS не работает для размытия фона ⇐ CSS

[Anonymous]

В моем приложении React/Tailwind есть всплывающее меню для мобильных устройств с шириной экрана менее 768 пикселей, которое использует свойства Tailwind backdrop-blur, чтобы размыть все, что находится за пунктами меню. У меня есть переход-все с длительностью-[400 мс], который работает для исчезновения в меню при нажатии кнопки, но при его закрытии эффект перехода отсутствует.
Ниже приведен код

Код: Выделить всё

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 (


[img]{logo} alt=[/img]

{isAboveSmallScreens ? "/* content for desktop menu */" : (

{isMenuToggled ? "Close" : "Menu"}

)}




);
};

export default Navbar;

Как обеспечить переход как внутрь, так и наружу?

Подробнее здесь: https://stackoverflow.com/questions/787 ... kdrop-blur