Question

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

链接到示例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>

要显示任何内容，您的行需要使用.line类。为了处于“活动”状态，他们需要添加各自的.lineX类以添加要查看的转换。由于您同时需要两个类，因此需要将它们都放入className属性中，在此我通过将它们放入一个字符串中来完成。

我建议您更改CSS并在菜单中添加一个active类。

潜在的问题是，您有时需要在元素中添加多个类。您可以像上面显示的那样使用字符串插值来做到这一点（向active添加.menu类也可以），或者可以使用classnames这样的模块来很好地连接类。这样你就可以写

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

我仍然建议在组件的“根”元素上创建一个active修饰符类，以使修饰符保持在顶层，并使代码更易于理解。这是your modified example。

发生onClick事件（react.js）时，动画不起作用

1 个答案: