CSS Transition在汉堡转叉按钮上不生效，求排查解决方法

嘿，我帮你排查了下代码，你的过渡没生效主要有两个核心问题，咱们一步步来修复：

1. 过渡属性加错了位置 #

你把transition加在了父元素.main__box__nav__hamburger上，但实际需要动画的是子元素.line的transform和top属性——而transition是非继承属性，父元素的过渡不会作用在子元素上。所以得把过渡规则移到.line类里：

.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;
  /* 也可以精确指定属性，性能更好：transition: transform 0.5s, top 0.5s; */
}

2. .line1缺少初始top值 #

.line1默认的top是auto，当切换到top: 50%时，浏览器无法计算auto到数值的过渡（因为auto不是具体数值），所以要给.line1设置初始的top值：

.line1 {
  top: 0;
}

修复后的完整代码 #

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;
  transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s;
}

.line1 {
  top: 0; /* 新增初始top值 */
}

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

额外优化建议 #

• 可以给.line添加transform-origin: center;（默认就是center，但显式写出来更清晰），确保旋转是围绕中心进行的；
• 如果只需要动画transform和top，建议把transition: all改成transition: transform 0.5s cubic-bezier(...), top 0.5s cubic-bezier(...)，这样只会对需要变化的属性应用过渡，性能更优。

内容的提问来源于stack exchange，提问作者Dagmara Lewandowska