css - 关闭动画上的汉堡菜单

Question

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

<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 属性，所以它没有按照我想要的方式进行动画处理，它改变了位置和东西。
Ty，我真的很抱歉，但我不知道该如何解释。

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');
  });
});