javascript - 添加导航栏动画的问题

Question

  const [isMenuOpen, setIsMenuOpen] = useState(false);

@keyframes appear {
    0%{
        transform: translateX(100%);

    }
    100%{
        transform: translateX(0%);
    }
}

.mNavBar{
    animation: appear 200ms ease-in forwards;
}

{isMenuOpen ?  <div className="mNavBar" ></div> : null}

我想向我的导航栏添加动画效果。我尝试使用切换类并添加动画，即 translateX(-100%) 但是当页面加载时，navBar 以某种方式保持打开一秒钟，然后即使 isMenuOpen 默认为 false 也会翻译出来。

标签： javascripthtmlcssreactjs

Answer 1

您应该使用元素的 className 而不是添加/删除整个元素。例如：

// The state:  
const [isMenuOpen, setIsMenuOpen] = useState(false);

// The element:
<div className={`mNavBar ` + (isMenuOpen && `open`)}></div>

// The styles:
    .mNavBar{
        transition: transform 200ms;
        transform: translateX(-100%);
        // the rest of your styles
    }
    .mNavBar.open{
        transform: translateX(0);
    }