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类）：

＆＃13;

var burger = document.querySelector('.main__box__nav__hamburger');

burger.addEventListener('click', function() {
  this.classList.toggle('close');
});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

CSS Transition不适用于汉堡包按钮

1 个答案: