CSS Transition不適用於“漢堡包”按鈕

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

 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>