Анимация не работает, когда происходит событие onClick (react.js)

Я создаю простое меню гамбургера и хочу добавить новое className в элемент, когда происходит событие onClick. Это новое 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;
}

reactjs javascript css-modules react-css-modules classname
person Rokas Simkus    schedule 13.12.2018    source источник
comment
Можете ли вы включить ссылку на живой пример?   -  person Andy Hoffman    schedule 13.12.2018
comment
Привет, я добавил пример сюда: repl.it/@RokasSimkus/DelectableFrugalMuse   -  person Rokas Simkus    schedule 14.12.2018
comment
Я рекомендую вам проверить reactcommunity.org/react-transition-group/css-transition Возможно, вам потребуется, чтобы изменения анимации также синхронизировались в JavaScript.   -  person Darlesson    schedule 14.12.2018

Ответы (1)


arrow_upward
0
arrow_downward

Если я изменю отмеченную вами строку на следующую, она сработает:

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 для вашего «корневого» элемента вашего компонента, чтобы модификаторы находились на верхнем уровне, а ваш код был немного более понятным. Вот ваш модифицированный пример.

person Narigo    schedule 14.12.2018