关闭动画上的汉堡菜单

Question

我正在创建一个汉堡菜单，但我在动画方面遇到了一些问题。 我创建了 2 个div，1 个用于 3 条基本水平线，一个用于 "X"。我知道如何用jQuery隐藏和显示它们(比如，你点击3行，3行隐藏，"X"显示(，但我想在"X"上创建一个动画，就像它同时绘制"\"和"/"一样。就像它从顶角星星，它结束和底部。我真的不知道如何解释这一点，我的英语很差。这是我到目前为止所做的

<div class="x"> 
<div></div> 
<div></div> 
</div>

和 CSS

.x {
position: fixed;
top:47%;
left: 5%; }
.x div {
width: 40px;
height: 2px;
background-color: #000000; }
.x div:nth-child(1) {
transform: rotate(45deg); } 
.x div:nth-child(2) {
transform: rotate(-45deg); } 

我试图在每一行上创建一个动画，从 witdh：0 ( 0% ( 和 witdh：40px ( 100% ( 开始，但由于我使用了 transform 属性，它不会按照我想要的方式进行动画处理，它会更改位置和内容。
泰和我真的很抱歉，但我不知道如何解释这一点。

Answer 1

我想你正在寻找这样的东西：

document.addEventListener('DOMContentLoaded', function(){    
var menus = document.querySelectorAll('.menu');
var onClick = function(){
this.classList.toggle('open');
}
menus.forEach(function(menu, index){
menu.addEventListener('click', onClick);
});
});

body {
margin: 20px;
}
.menu {
cursor: pointer;
height: 24px;
list-style: none;
margin: 0;
padding: 0;
width: 30px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.menu li {
background-color: #111;
border-radius: 4px;
display: block;
height: 4px;
left: 0;
margin: 0;
opacity: 1;
padding: 0;
position: absolute;
width: 100%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .15s ease-in-out;
-moz-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
transition: .15s ease-in-out;
} 
.menu li:nth-child(1) {
top: 0;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu li:nth-child(2) {
top: 9px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu li:nth-child(3) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.menu.open li:nth-child(1) {
left: 4px;
top: -1px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.open li:nth-child(2) {
opacity: 0;
width: 0;
}
.menu.open li:nth-child(3) {
left: 4px;
top: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

<ul class="menu">
<li></li>
<li></li>
<li></li>
</ul>

使用 jQuery

$(document).ready(function(){
$('.menu').click(function(){
$(this).toggleClass('open');
});
});

Answer 2

Bogdan。如果我正确理解你的问题，我为你做了一个例子。

.HTML：

<div id="hamburger" class="hamburger hamburger_active">
<div class="hamburger__line"></div>
<div class="hamburger__line"></div>
</div>

.CSS：

.hamburger {
width: 40px;
height: 40px;
position: fixed;
top:50%;
left: 50%;
border: 1px solid red; 
}
.hamburger.hamburger_active .hamburger__line {
width: 100%;
}
.hamburger__line {
width: 0;
height: 2px;
position: absolute;
transform-origin: 20px 0;
top: 50%;
left: 0;
background-color: #000000;
transition: width .3s ease;
}
.hamburger__line:nth-child(1) {
transform: rotate(45deg);
} 
.hamburger__line:nth-child(2) {
transform: rotate(135deg);  
} 

j查询：

var $menu = $("#hamburger");
$menu.click(function() {
$(this).toggleClass('hamburger_active');
});