切换class添加过渡动画，移除类时无动画效果有什么更优实现方案？

问题根源 #

你遇到的移除类无动画的核心原因是：过渡动画生效的前提是状态切换前后，元素都定义了对应的transition属性。你之前只把transition写在.highlight类里，当元素移除.highlight的瞬间，transition属性直接消失，从红色回到默认背景色的过程没有过渡规则生效，自然看不到动画。

你用*通配符给所有元素加过渡的写法确实不合理，会给永远不会被高亮的元素也额外增加渲染开销，还可能和其他自定义的过渡规则产生优先级冲突。

最优实现方案 #

推荐通过标记类的方式实现，只会给曾经被高亮过的元素添加过渡属性，完全没有多余性能消耗，也不需要提前预设要高亮的元素：

CSS代码 #

/* 仅给有过高亮历史的元素加过渡规则 */
.has-highlighted {
  transition: background-color 1s;
}
/* 高亮状态只写样式即可 */
.highlight {
  background-color: red;
}

JS代码 #

[...document.querySelectorAll('body *')].forEach(e => e.addEventListener('click', () => {
  // 首次触发高亮时添加标记类，后续永久保留过渡属性
  if (!e.classList.contains('has-highlighted')) {
    e.classList.add('has-highlighted')
  }
  e.classList.toggle('highlight')
}));

补充轻量方案（无需改JS） #

如果不想修改JS逻辑，可以用优先级为0的:where()选择器写通配过渡，不会覆盖其他元素自定义的过渡规则，副作用比直接写*小很多：

:where(*) {
  transition: background-color 1s;
}
.highlight {
  background-color: red;
}

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