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

【问题标题】：Animation doesnt work when onClick event occurs (react.js)发生 onClick 事件时动画不起作用（react.js）
【发布时间】：2019-05-15 02:10:21
【问题描述】：

我正在创建一个简单的汉堡菜单，我想在 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;
}

【问题讨论】：

你能附上一个实例的链接吗？
嗨，我在这里添加了示例：repl.it/@RokasSimkus/DelectableFrugalMuse
我建议您检查reactcommunity.org/react-transition-group/css-transition 您可能还需要在 JavaScript 中对动画更改进行计时。

标签： javascript reactjs classname css-modules react-css-modules

【解决方案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。

【讨论】：