当我在React中动态设置className时，CSS转换不起作用

Question

我有一个汉堡包菜单，但我想在单击时向它添加另一个className，这样它就可以旋转，但这里的问题是，当添加到父元素时，transition属性不起作用，但当单独添加到汉堡包内的span元素时，它似乎起作用。

这是最初的css样式

.navbar__hamburger {
position: relative;
display: none;
flex-direction: column;
row-gap: 0.2rem;
@include respond(desktop) {
transition: all ease-in-out 5s;
display: flex;
z-index: 1000;
cursor: pointer;
}
span {
width: 2rem;
height: 0.2rem;
background-color: black;
}
span:nth-child(2) {
width: 1rem;
align-self: flex-end;
}
}

点击汉堡菜单时的css

.animation {
span:nth-child(1) {
transform: rotate(140deg);
}
span:nth-child(2) {
opacity: 0;
}
span:nth-child(3) {
position: absolute;
transform: rotate(-140deg);
}
} 

以下是单击时添加className的方式

const [isMenuOpen, setIsMenuOpen] = useState(false);
<div onClick={() => setIsMenuOpen(!isMenuOpen)} className={`navbar__hamburger ${isMenuOpen ? "animation" : ""}`}>
<span></span>
<span></span>
<span></span>
</div> 

Answer 1

你好，你应该把transition: all 0.3s属性放在你想在你的情况下动画的元素上，我认为

更新你的css

.navbar__hamburger span {transition: all 0.3s}