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

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

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

* {
  transition: all 0.3s;
}

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

p:hover {
  color: white;
}

<div>

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

</div>