Невозможно настроить меню гамбургера на анимацию

89
10

Я нацелился на SVG rect, используя: nth-chid (1), 2 и 3 и сделал a ->, который я пытаюсь запускать при нажатии. Не знаю, что я делаю неправильно здесь. Любая помощь будет большой спасибо!

(function() {
var burger;

buger = document.getElementById('burger');

burger.addEventListener('click', function() {
console.log('you cliked the burger');
return burger.classList.toggle('st0-active');
});

}).call(this);

body {
max-width: 900px;
margin: 0 auto;
}

.st0-active:nth-child(1) {
-webkit-transform: rotate(27deg) translate(23px, -51px);
transform: rotate(27deg) translate(23px, -51px);
fill: #000;
}
.st0-active:nth-child(2) {
fill: #000;
}
.st0-active:nth-child(3) {
-webkit-transform: rotate(-21deg) translate(-48px, 15px);
transform: rotate(-21deg) translate(-48px, 15px);
fill: #000;
}

<body>
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger">
<g id="icon_x5F_hamburger">
<rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/>
<rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/>
<rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/>
</g>
</svg>

</body>

Вот изображение моей разработанной конечной цели enter image description here

Именно по этой причине я использую CSS Transforms и нацеливаю на rect с помощью nth-child. Вот ссылка на codepen, в которой я сейчас работаю, чтобы ввести описание ссылки здесь

спросил(а) 2021-01-25T18:31:41+03:00 4 месяца, 3 недели назад
1
Решение
64

(function() {
var burger;

burger = document.getElementById('burger');

burger.addEventListener('click', function() {
console.log('you cliked the burger');
return burger.classList.toggle('st0-active');
});

}).call(this);

body {
max-width: 900px;
margin: 0 auto;
}
#burger > g > rect{
transition: transform 1s;
}

.st0-active > g > rect:nth-child(1) {
-webkit-transform: rotate(27deg) translate(23px, -51px);
transform: rotate(27deg) translate(23px, -51px);
fill: #000;
}
.st0-active > g > rect:nth-child(2) {
fill: #000;
}
.st0-active > g > rect:nth-child(3) {
-webkit-transform: rotate(-21deg) translate(-48px, 15px);
transform: rotate(-21deg) translate(-48px, 15px);
fill: #000;
}

<body>
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="burger">
<g id="icon_x5F_hamburger">
<rect x="0.11206" y="46.3329" class="st0" width="200" height="8"/>
<rect x="0.11206" y="96.22083" class="st0" width="200" height="8"/>
<rect x="0.11206" y="146.10876" class="st0" width="200" height="8"/>
</g>
</svg>

</body>

Попробуйте добавить этот код.

#burger{
transition: transform 1s;
}

Дополнительно

Переходы CSS3 позволяют вам изменять значения свойств плавно (от одного значения к другому) в течение заданной продолжительности.

ответил(а) 2021-01-25T18:31:41+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема