CSS 过渡添加

Question

我在 Chrome 上偶然发现了一个奇怪的 CSS 效果（在 Firefox 上不会发生）。

我需要在超过 90% 的网站元素上使用过渡，所以我基本上使用 * CSS 选择器为所有内容添加了过渡。

但是当有封装的元素时会产生奇怪的延迟，这种情况经常发生，真的很烦人。

除了将过渡放在每个元素上而不是全局上之外，还有什么方法可以解决这个问题？

谢谢。

* {
  transition: all 0.3s ease-out;
}

p:hover {
  color: white;
}

<p>Test <span>test2</span></p>

编辑：我已经知道你可以通过更好地定位你的元素来解决这个问题，但我正在寻求一种无需这样做的方法。

Answer 1

虽然这个解决方案将与针对每个过渡元素的方向相同，但只有针对每个容器元素的相反方式......也可能会变得非常混乱。最初的问题没有解决，为什么父元素有过渡时会有延迟，所以首先完成父过渡然后开始子过渡...我的尝试只是一种解决方法，以便您尝试选择所有最后一个子元素和然后禁用他们的过渡，因为他们已经通过他们的父母进行了过渡......

编辑：您必须将所有容器元素添加到第二条规则中，也许它会有所帮助

* {
  transition: all 0.3s;
}

*:not(body):not(div) > * {
  transition: none;
}

p:hover {
  color: white;
}

<div>

  <p>Test <span>test2</span></p>

</div>