如何通过切换 class 添加过渡动画？

Question

我有一些元素需要有条件地 highlighted/unhighlighted。

所以我有一个名为 highlight 的 class 给任何需要用过渡动画突出显示的元素。

问题是当 highlight class 被移除后，我无法为其设置动画。

因为任何元素都可以突出显示，所以我找不到适合它们的特定选择器。

我可以这样做，但我觉得不合适：

* {
  transition: background-color 1s;
}

有没有更好的实现方式？

这是一个演示我的问题的简化示例：

[...document.querySelectorAll('body *')].forEach(e => e.addEventListener('click', () => e.classList.toggle('highlight')));

.highlight {
  background-color: red;
  transition: background-color 1s;
}

<h2>Click anything to toggle highlight</h2>

<p>Hello</p>
<p>World</p>
<p>Thanks</p>

Answer 1

做不同的逻辑

[...document.querySelectorAll('body *')].forEach(e => e.addEventListener('click', function(e) {
  e.target.classList.toggle('bg');
  e.target.classList.add('highlight'); /* always add highlight */
}));
/* remove highlight when the transition is done */
[...document.querySelectorAll('body *')].forEach(e =>
  e.addEventListener('transitionend', function(e) {
    e.target.classList.remove('highlight');
  })
);

.highlight {
  transition: background-color 1s;
}

.bg {
  background: red;
}

<h2>Click anything to toggle highlight</h2>

<p>Hello</p>
<p>World</p>
<p>Thanks</p>

如何通过切换 class 添加过渡动画？

How do I add an transition animation by toggling a class?

html

css

css-transitions