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

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

  •  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 .

    推荐文章