如何完成汉堡动画？

Question

对不起，我是初学者。我怎样才能完成这个功能。通过点击汉堡，面包旋转并形成 'x'。单击 'x' 后，它应该再次倒退。我的第二个问题是，当包子形成 'x' 时，它们仍然会悬停移动（垂直移动）。

$('#hamburger').click(function() {
  $('nav').fadeToggle(200);
});

$('#hamburger').click(function() {
  $('#top-bun').css('transform','rotate(45deg)');
  $('#bottom-bun').css('transform','rotate(-45deg)');
  $('#top-bun').css('top','35%');
  $('#bottom-bun').css('bottom','35%');
});

https://jsfiddle.net/bncqjxa9/

Answer 1

$('#hamburger').click(function() {
    $('nav').fadeToggle(200);
});
        
$('#hamburger').click(function() {
    $(this).toggleClass('open');
});

#hamburger{
 position: fixed;
 z-index: 150;
 top: 30px;
 right: 30px;
 width: 40px;
 height: 25px;
 border: 0;
 background: none;
    cursor: pointer;
}
#hamburger .bun{
 display: block;
 position: absolute;
 left: 0;
 height: 4px;
 width: 100%;
 background: black;
 transition: 0.2s;
}
#top-bun{
 top: 0;
 margin-top: 3px;
}
#bottom-bun{
 bottom: 0;
 margin-bottom: 3px;
}
#hamburger.open #top-bun {
    transform: rotate(45deg);
    top: 35%;
}
#hamburger.open #bottom-bun {
    transform: rotate(-45deg);
    bottom: 35%;
}
nav{
 display: none;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="hamburger">
  <div class="bun" id="top-bun"></div>
  <div class="bun" id="bottom-bun"></div>
</button>

<nav>
  <ul>
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
  </ul>
</nav>

它可以帮助减少动画技术。在本例中，您使用了 CSS 和 JavaScript。为了方便起见，我将它减少到 CSS 并且只切换了一个 class 以便在一个地方（在 css 文件中）控制动画。

进一步的改进可能是不使用 id select 或样式（它非常有限，因为它是绝对的）。尽量不要嵌套 select 或太深，否则它会降低性能，或者在某些时候你会失去对样式的控制。看看系统的或模块化的方法，例如 BEM。如果你严格组织你的风格，你以后就不会遇到麻烦了。

另一件事是，如果您通过更改 CSS 属性来为元素设置动画并且已经使用 transform 那么为什么不坚持下去呢？例如，您可以避免使用 top 等其他属性。也可以提高性能。 (High Performance Animation)。关于您的 JavaScript，您可以将 selected 元素保存在变量中，而不必再次 select 它们。 var $hamburger = $('#hamburger'); $hamburger.on('click', ...); 您还可以使用 on 方法，在 jQuery 中处理事件时，这是一种首选方法。 $hamburger.on('click', function() {}); 而不是 $hamburger.click(function() {});

如何完成汉堡动画？

How to complete hamburger animation?

javascript

css

jquery

css-transitions

hamburger-menu