CSS 转换不适用于汉堡包按钮

Question

我制作了一个汉堡包按钮，我正在尝试制作跨度动画以创建一个十字。

我的转换不起作用，我不知道为什么... 我发现有时转换在 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 class）：

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>

CSS 转换不适用于汉堡包按钮

CSS Transition doesn't work with hamburger button

html

css

jquery

transition