onClick事件发生时动画无法工作(react.js)
onClick事件发生时动画无法工作(react.js)
提问于 2018-12-13 19:41:09
我正在创建一个简单的汉堡包菜单，并希望在发生className事件时向元素中添加新的onClick。这个新的className应该转换元素，但是当onClick发生元素失智时，动画就不能工作了。我知道问题出在classes.linei部分，但是有什么问题呢?也许有人能在这里帮助我。
链接到示例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
Stack Overflow用户
回答已采纳
发布于 2018-12-14 02:05:11
如果我将您标记的行更改为以下内容，它就会工作：
return <span key={"classes.line" + i} className={`${classes.line} ${props.active ? `${classes["line" + i]}` : ''}`}></span>要显示任何内容，您的行需要类.line。要处于“活动”状态，他们需要添加各自的.lineX类来添加您想要看到的转换。由于同时需要这两个类，所以需要将这两个类放入className属性中，这是我在这里通过将它们放在一个字符串中完成的。
我建议更改您的CSS并在菜单中添加一个active类。
根本的问题是，您需要在某个时候向元素添加多个类。您可以像我前面展示的那样使用字符串内插(向active类添加.menu类也是如此)，也可以使用类名这样的模块来连接类。这样你就可以写
return <span key={"classes.line" + i} className={classnames(classes.line, props.active && classes["line" + i])}></span>我仍然建议在组件的“根”元素上创建一个active修饰符类，以使修饰符保持在顶层，代码更容易理解。这是您修改的示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53768983
复制相关文章
相似问题
腾讯云开发者
