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属性，所以它没有动画化我想要的方式，因此更改了职位和东西。
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');
  });
});

Answer 2

博格丹。如果我正确理解了您的问题，我就会为您制作an example。

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

jQuery：

var $menu = $("#hamburger");

$menu.click(function() {
    $(this).toggleClass('hamburger_active');
});

汉堡菜单上关闭动画

2 个答案: