如何让CSS切换开关仅在用户交互时触发过渡，JS修改时无过渡？

现有开关代码 #

CSS #

* { box-sizing: border-box; }
.switch { 
  appearance: none; 
  padding: 9px 18px; 
  border-radius: 13px; 
  background: radial-gradient(circle 9px, #007722 100%, transparent 100%) transparent -9px; 
  border: 1px solid #007722; 
  transition: all 0.3s; 
}
.switch:checked { background-position: 9px; }

HTML #

<input type="checkbox" class="switch">

需求 #

仅当用户通过点击、键盘操作等交互行为修改开关状态时，触发CSS平滑过渡动画；若通过JS代码直接修改checked属性（如item.checked = false），则不触发过渡。

解决方案 #

1. 纯CSS为主的方案（低JS侵入） #

目前没有原生CSS属性能直接区分“用户触发”和“JS触发”的状态变化，但可以利用用户交互会触发元素的:focus-visible/:active伪类，只在这些状态下启用过渡：

修改后的CSS：

* { box-sizing: border-box; }
.switch { 
  appearance: none; 
  padding: 9px 18px; 
  border-radius: 13px; 
  background: radial-gradient(circle 9px, #007722 100%, transparent 100%) transparent -9px; 
  border: 1px solid #007722; 
  /* 默认关闭过渡 */
}
/* 仅在用户交互触发的焦点/激活状态下启用过渡 */
.switch:focus-visible,
.switch:active {
  transition: all 0.3s;
}
.switch:checked { background-position: 9px; }

补充小优化：用户点击后开关会保持焦点，若后续JS修改状态仍会触发过渡，可加一行JS在过渡结束后移除焦点：

document.querySelector('.switch').addEventListener('transitionend', function() {
  this.blur();
});

2. 更清晰的JS方案（类控制状态） #

比起直接移除/恢复transition属性，用CSS类来控制过渡状态更符合代码分离原则，也更易维护：

首先在CSS中添加禁用过渡的类：

.switch.no-transition {
  transition: none !important;
}

然后JS修改状态时，通过类来临时禁用过渡：

const switchEl = document.querySelector('.switch');
// 启用禁用过渡的类
switchEl.classList.add('no-transition');
// 修改开关状态
switchEl.checked = false;
// 下一帧恢复过渡（避免浏览器合并渲染导致过渡生效）
requestAnimationFrame(() => {
  switchEl.classList.remove('no-transition');
});

关于“仅用户触发的transition属性” #

目前没有原生CSS属性可以直接实现“仅用户触发才生效的过渡”，所有CSS过渡都是基于元素属性值的变化，不管变化是来自用户交互还是JS代码。

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