代码之家 › 专栏 › 技术社区 › Rokas Simkus

当onClick事件发生时,动画不起作用(react.js)

react-css-modules css-modules classname reactjs javascript

0

Rokas Simkus · 技术社区 · 7 年前

类别.行[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;
}

1 回复 | 直到 7 年前

1

0

Narigo 7 年前

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

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

要展示任何东西,你的台词需要课堂 .line .lineX 类添加要查看的转换。由于同时需要两个类,所以需要将它们都放入className属性中,我在这里将它们放在一个字符串中。

我建议您更改CSS并添加一个 active 请按菜单上课。

潜在的问题是,您需要在某个时刻向元素添加多个类。你可以像我上面展示的那样使用字符串插值来实现这一点(添加一个 忙碌的 归类于 .menu )或者你可以使用一个模块,比如 classnames 这在连接类方面做得很好。这样你就可以写作了

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

我仍然建议创建一个 忙碌的 your modified example .