SVG汉堡菜单图标线条位置过渡效果失效问题求助

问题根源 #

你当前通过JS直接修改SVG <line> 元素的x1/y1/x2/y2属性切换状态，但这些是SVG原生DOM属性，不属于CSS可过渡的标准属性——CSS transition 仅对CSS属性（比如transform、opacity等）生效，直接修改DOM属性不会触发过渡动画。

解决方案：用CSS类切换控制状态 #

改用CSS的transform和opacity实现状态变化，通过切换.open类触发过渡，同时简化JS逻辑：

1. 修改CSS代码

.hm-button {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.hm-outline {
  x: 2px;
  y: 2px;
  width: 46px;
  height: 46px;
  rx: 4px;
  fill: none;
}

.hm-outline,
[class^="hm-line"] {
  stroke-width: 4px;
  stroke: black;
}

[class^="hm-line"] {
  stroke-linecap: round;
  transition: all 0.25s ease;
  /* 设置旋转原点为线条左侧端点，匹配你要的端点交换效果 */
  transform-origin: 13px center;
}

/* 打开状态的线条样式 */
.hm-button.open .hm-line1 {
  transform: rotate(45deg) translateY(12px);
}

.hm-button.open .hm-line2 {
  opacity: 0;
}

.hm-button.open .hm-line3 {
  transform: rotate(-45deg) translateY(-12px);
}

2. 简化JS代码

无需手动修改线条坐标，只需要切换.open类即可：

document.addEventListener("DOMContentLoaded", (event) => {
  const hamburgerButtons = document.querySelectorAll('.hm-button');

  const handleHamburgerClick = (event) => {
    const button = event.target.closest('.hm-button');
    button.classList.toggle('open');
  };

  hamburgerButtons.forEach((button) => {
    button.addEventListener("click", handleHamburgerClick);
  });
});

3. HTML代码保持不变

<svg class="hm-button" role="button">
  <rect class="hm-outline" />
  <line class="hm-line1" x1="13" x2="37" y1="13" y2="13" />
  <line class="hm-line2" x1="13" x2="37" y1="25" y2="25" />
  <line class="hm-line3" x1="13" x2="37" y1="37" y2="37" />
</svg>

为什么这样可行？ #

• transform和opacity是标准CSS属性，完全支持CSS过渡动画；
• 通过transform-origin设置旋转中心为线条左侧端点，旋转后刚好形成你需要的X形；
• 类切换的方式符合前端分离原则（样式由CSS控制，交互由JS控制），代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Jacob N