JavaScript控制按钮SVG透明度切换异常问题求助

核心问题 #

1. 未执行初始隐藏操作：点击按钮时未按需求先将未选中SVG的opacity设为0，导致加载状态显示时未选中图标仍可见。
2. CSS动画覆盖行内样式：.checked和.loading的动画会强制将opacity设为0，优先级高于JS设置的行内样式，直接导致JS修改失效。
3. 状态判断依赖行内样式：初始状态下，SVG的opacity定义在CSS中，element.style.opacity返回空字符串，导致判断逻辑出错。

修复后的代码 #

HTML（无需修改）

<button class="check-box" id="button1" onclick="toggleState(1)">
  <div class="svg-container">
    <svg class="unchecked button1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 32 32" fill="none">
      <circle cx="16" cy="16" r="12" stroke="#8b8b8b" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 6" />
    </svg>
    <svg class="checked button1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none">
        <circle cx="12" cy="12" r="10" fill="#303030"></circle>
        <path d="M17.2738 8.52629C17.6643 8.91682 17.6643 9.54998 17.2738 9.94051L11.4405 15.7738C11.05 16.1644 10.4168 16.1644 10.0263 15.7738L7.3596 13.1072C6.96908 12.7166 6.96908 12.0835 7.3596 11.693C7.75013 11.3024 8.38329 11.3024 8.77382 11.693L10.7334 13.6525L15.8596 8.52629C16.2501 8.13577 16.8833 8.13577 17.2738 8.52629Z" fill="#fff"></path>
    </svg>
    <svg class="loading button1" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 28 28" fill="none">
        <path
          d="M26 14C26 16.3734 25.2962 18.6935 23.9776 20.6668C22.6591 22.6402 20.7849 24.1783 18.5922 25.0866C16.3995 25.9948 13.9867 26.2324 11.6589 25.7694C9.33114 25.3064 7.19295 24.1635 5.51472 22.4853C3.83649 20.8071 2.6936 18.6689 2.23058 16.3411C1.76755 14.0133 2.00519 11.6005 2.91345 9.4078C3.8217 7.21509 5.35977 5.34094 7.33316 4.02236C9.30655 2.70379 11.6266 2 14 2"
          stroke="#8b8b8b"
          stroke-width="2.5"
          stroke-linecap="round"
          stroke-linejoin="round"
          />
    </svg>
  </div>
</button>

CSS（移除冲突动画，保留基础布局）

.check-box {
  display: block;
  height: fit-content;
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
}

.svg-container {
  position: relative;
  width: 30px;
  height: 30px;
}

.svg-container .unchecked {
  opacity: 1;
}

.svg-container .checked,
.svg-container .loading {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

JavaScript（修正逻辑，获取实际计算样式）

function toggleState(buttonIndex) {
  const uncheckedSvg = document.querySelector(`#button${buttonIndex} .unchecked`);
  const checkedSvg = document.querySelector(`#button${buttonIndex} .checked`);
  const loadingSvg = document.querySelector(`#button${buttonIndex} .loading`);

  // 第一步：隐藏未选中，显示加载
  uncheckedSvg.style.opacity = '0';
  loadingSvg.style.opacity = '1';

  setTimeout(() => {
    // 隐藏加载
    loadingSvg.style.opacity = '0';
    
    // 获取当前实际的opacity（解决初始CSS样式导致行内style为空的问题）
    const uncheckedOpacity = window.getComputedStyle(uncheckedSvg).opacity;
    
    // 切换状态：互斥显示
    if (uncheckedOpacity === '1') {
      uncheckedSvg.style.opacity = '0';
      checkedSvg.style.opacity = '1';
    } else {
      uncheckedSvg.style.opacity = '1';
      checkedSvg.style.opacity = '0';
    }
  }, 1000);
}

优化建议（可选） #

用CSS类控制状态更简洁易维护，避免直接操作行内样式：

1. 在CSS中添加状态类：

.svg-container.loading .unchecked { opacity: 0; }
.svg-container.loading .loading { opacity: 1; }
.svg-container.checked .unchecked { opacity: 0; }
.svg-container.checked .checked { opacity: 1; }

2. 修改JavaScript：

function toggleState(buttonIndex) {
  const container = document.querySelector(`#button${buttonIndex} .svg-container`);
  
  // 启用加载状态
  container.classList.add('loading');
  container.classList.remove('checked');

  setTimeout(() => {
    // 关闭加载状态，切换选中/未选中
    container.classList.remove('loading');
    container.classList.toggle('checked');
  }, 1000);
}

这种方式代码更简洁，状态切换更清晰，也避免了样式优先级问题。

内容的提问来源于stack exchange，提问作者Abdulmujeeb Ahmad