onClick 事件发生时动画不工作 (react.js)

Question

我正在创建一个简单的汉堡包菜单，我想在 onClick 事件发生时向元素添加新的类名。这个新的 className 应该转换元素，但是当 onClick 发生时元素消失，动画不起作用。我知道问题出在 classes.line[i] 部分，但可能是什么问题，也许有人可以在这里帮助我。

link 到例子 https://repl.it/@RokasSimkus/DelectableFrugalMuse

jsx:

   const menu = (props) =>{
  let lineArray= ['', '', ''];
  let lines= lineArray.map((lineArray, i) => {
  return <span key={"classes.line" + i} className={!props.active ? classes.line : classes.line[i]}></span>
});
console.log(props.active);
  return(
  <>
<div className={!props.active ? classes.hamburger: classes.hamburger}
onClick={props.open}
onMouseOver={props.mouseHover}
onMouseLeave={props.leaveMouseHover}>
{lines}
</div>
</>
)
};

css代码：

 @media(min-width: 500px){
  .hamburger{
        display: none;
  }
}
.hamburger {
left: 0;
top: 0;
}
.hamburger .line {
  display: block;
  width: 30px;
  height: 2px;
  background-color: white;
  margin: 8px 0;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover {
  cursor: pointer;
  .line:nth-of-type(1) {
    transform: translateX(15px);
    width: 40px;
  }
}

.hamburger .line1 {
  transform: translate(4px, 1px) rotate(45deg);
  width: 18px;
}

.hamburger .line2 {
  transform: rotate(-45deg);
  width: 51px;
}

.hamburger .line3 {
  transform: translate(14px, 4px) rotate(45deg);
  width: 28px;
  transform-origin: bottom right;
}

Answer 1

如果我将您标记的行更改为以下内容，它会起作用：

return <span key={"classes.line" + i} className={`${classes.line} ${props.active ? `${classes["line" + i]}` : ''}`}></span>

要显示任何内容，您的行需要 class .line。要处于 "active" 状态，他们需要添加各自的 .lineX class 以添加您想要看到的转换。由于您同时需要两个 classes，因此您需要将两者都放入 className 属性，我在这里将它们放在一个字符串中。

我建议更改您的 CSS 并在您的菜单中添加 active class。

潜在的问题是您需要在某些时候向您的元素添加多个 class。您可以像我上面显示的那样使用字符串插值来做到这一点（将 active class 添加到 .menu 也是如此），或者您可以使用像 classnames 这样的模块来执行连接 classes 做得很好。因此你可以写

return <span key={"classes.line" + i} className={classnames(classes.line, props.active && classes["line" + i])}></span>

我仍然建议在组件的 "root" 元素上创建一个 active 修饰符 class，以使修饰符保持在顶层并使您的代码更易于理解.这里是 your modified example.

onClick 事件发生时动画不工作 (react.js)

Animation doesnt work when onClick event occurs (react.js)

javascript

classname

reactjs

css-modules

react-css-modules