CSS преобразование в файле sass и анимации не работают - PullRequest
Новая
       8

CSS преобразование в файле sass и анимации не работают

0 голосов
/ 28 марта 2020

Я пытаюсь анимировать 3 деления (.line 1, .line2 и .line3), вращая их по щелчку другого делителя (#burger).

3 деления обернуты вокруг #burger div (они находятся в файле. js): 

<div
    id="burger"
    onClick={activateResponsiveMenu}
    className={navbarStyles.burger}
  >
    <div className={navbarStyles.line1}></div>
    <div className={navbarStyles.line2}></div>
    <div className={navbarStyles.line3}></div>
  </div>

CSS записывается в файл .s css и импортируется как navbarStyles. В CSS я оживляю div, добавляя класс «clicked» в #burger div. Что касается анимации, я хотел бы, чтобы div .line1 и .line3 вращались, а .line 2 исчезали: 

.clicked .line1 {
  transform: rotate(-45deg translate(-5px, 6px));
}

.clicked .line2 {
  opacity: 0;
}

.clicked .line3 {
  transform: rotate(45deg translate(-5px, -6px));
}

Функция JS, переключающая класс .clicked на #burger, выглядит следующим образом: 

const activateResponsiveMenu = () => {
    const burger = document.querySelector("#burger")
    burger.classList.toggle(navbarStyles.clicked)
}

Проблема в том, что, хотя непрозрачность .line2 div при щелчке #burger изменяется на 0, преобразования CSS не работают и .line1 и .line3 не вращаются. Все остальные стили применяются.

1 Ответ

2 голосов
/ 28 марта 2020

В соответствии со спецификациями преобразования значения должны быть разделены пробелами https://developer.mozilla.org/en-US/docs/Web/CSS/transform, что делает ваш синтаксис недействительным, вместо этого вы должны использовать следующий формат 

transform: rotate(-45deg) translate(-5px, 6px);
...