汉堡包图标css 动画变成一个x

Question

我正在尝试让汉堡包图标在点击时变成 x，然后在再次点击时恢复原状。我认为我已经设置了动画，但我需要它在点击时触发而不是不断设置。

.nav-toggle { 
  position: absolute; 
  top: 2.3rem; 
  right: 1rem; 
  display: none;
  flex-direction: column; 
  justify-content: space-between; 
  height: 22px; 
  width: 22px; 
}

.nav-toggle:hover { /
  cursor: pointer;
}

.nav-toggle .bar { 
  height: 3px; 
  width: 100%; 
  background-color: white; 
  border-radius: 10px; 
  
}

.nav-toggle .bar:nth-child(2) {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}

.nav-toggle .bar:nth-child(1) {
  transform: rotate(45deg) translatey(13px)
}

.nav-toggle .bar:nth-child(3) {
  transform: rotate(-45deg) translateY(-13px)
}

.nav-toggle:active {
  transition: 1s;
}

ToggleNavLinks 函数仅用于将元素显示设置为 none 与汉堡包图标无关。

<a class="nav-toggle" onclick="ToggleNavLinks()" > 
    <span class="bar"></span> 
    <span class="bar"></span>
    <span class="bar"></span>
</a>

菜单打开图片参考：

script.js

function ToggleNavLinks() {
    var navLink = document.getElementsByClassName("nav-links")[0]; 
    var navBar = document.getElementsByClassName("navbar")[0]; 
    
    if (window.getComputedStyle(navLink).display === "none") {
        navLink.style.display = "flex";
        navBar.style.background = "#181a1d";  
    } 
    else {
        navLink.style.display = "none"; 
        navBar.style.background = "none"; 
    }
}

Answer 1

您可以在顶部和底部使用 tranform: rotate()，在中间跨度的宽度上使用 transition。

let navToggle = document.querySelector('.nav-toggle')
let bars = document.querySelectorAll('.bar')

function toggleHamburger(e) {
  bars.forEach(bar => bar.classList.toggle('x'))
}

navToggle.addEventListener('click', toggleHamburger)

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 22px;
  width: 22px;
}

.nav-toggle .bar {
  height: 3px;
  width: 100%;
  background-color: black;
  transition: all 100ms ease-in-out;
}

.nav-toggle:hover {
  cursor: pointer;
}

.x:nth-of-type(1) {
  transition: all 100ms ease-in-out;
  transform: rotate(45deg);
  transform-origin: top left;
  width: 28px;
}

.x:nth-of-type(2) {
  transition: all 100ms ease-in-out;
  transform-origin: center;
  width: 0;
}

.x:nth-of-type(3) {
  transition: all 100ms ease-in-out;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  width: 28px;
}

<a class="nav-toggle">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>

汉堡包图标css 动画变成一个x

Hamburger icon css animation into an x

javascript

css

animation