CSS 过渡不适用于汉堡按钮

Question

我制作了一个汉堡按钮，并尝试为 span 设置动画以创建一个十字架。

我的过渡不起作用，我不知道为什么... 我发现有时过渡在 chrome 上不起作用，所以我使用了 webkit 前缀但它没有帮助:(

这是我的 HTML 代码：

<div class="main__box__nav__hamburger">
    <span class="line line1"></span>
    <span class="line line2"></span>
    <span class="line line3"></span>
</div>

CSS 代码：

.main__box__nav__hamburger {
  min-width: 30px;
  height: 20px;
  margin: 45px 10px;
  position: relative;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s;
}
.line {
  position: absolute;
  min-width: 30px;
  height: 4px;
  border-radius: 2px;
  background: #000;
}
.line2 {
  top: 8px;
}
.line3 {
  top: 16px;
}
.main__box__nav__hamburger.close .line1 {
  transform: rotate(45deg);
  top: 50%;
}
.main__box__nav__hamburger.close .line2, .main__box__nav__hamburger.close .line3 {
  transform: rotate(-45deg);
  top: 50%;
}

Answer 1

这是因为您将过渡应用于父元素（汉堡包本身），而不是其子元素。请记住，transition 不会被继承。

将transition 属性移动到.line 选择器，它将起作用：

.line {
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s;
}

请参阅下面的概念验证（我添加了一些最小的 JS，因此单击汉堡包将切换可视化转换所需的 close 类）：

var burger = document.querySelector('.main__box__nav__hamburger');

burger.addEventListener('click', function() {
  this.classList.toggle('close');
});

.main__box__nav__hamburger {
  min-width: 30px;
  height: 20px;
  margin: 45px 10px;
  position: relative;
}
.line {
  position: absolute;
  min-width: 30px;
  height: 4px;
  border-radius: 2px;
  background: #000;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s;
}
.line2 {
  top: 8px;
}
.line3 {
  top: 16px;
}
.main__box__nav__hamburger.close .line1 {
  transform: rotate(45deg);
  top: 50%;
}
.main__box__nav__hamburger.close .line2, .main__box__nav__hamburger.close .line3 {
  transform: rotate(-45deg);
  top: 50%;
}

<div class="main__box__nav__hamburger">
    <span class="line line1"></span>
    <span class="line line2"></span>
    <span class="line line3"></span>
</div>