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

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

0 голосов
/ 13 декабря 2018

Я создаю простое меню гамбургера и хочу добавить новое 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;
}

1 Ответ

0 голосов
/ 14 декабря 2018

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

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

...