CSS 过渡：Webkit 浏览器（Chrome 和 Safari）中奇怪的不必要延迟

Question

我希望有人可以帮助解释我在 Webkit 浏览器中遇到的奇怪行为，其中 CSS 转换出现了不必要的延迟。

这是我正在处理的页面的链接：http://demo.daised.com/help-me

当用户向下滚动页面时，期望的结果是菜单栏缩小。这在 Firefox 中完美动画。

但是，在 Webkit 浏览器中，导航项的字体大小转换延迟了 6(!) 秒。

感谢您帮助我更好地理解这一点。

Answer 1

此问题是由继承 transition 属性的元素上的堆叠过渡引起的。

a, span {
  transition: 0.5s;
}

a {
  padding: 0.5em 0.75em;
  border: 1px solid red;
  color: #000;
  display: inline-block;
}

a:hover{
  color: #f00;
  background-color: #0f0;
}

<a>
  <span>Text Content</span>
</a>

css a, span 部分将过渡应用于两个元素。 span 从 a 继承颜色，但在 a 完成动画之前不会应用动画颜色。

上述示例的最佳解决方法是删除a, span 的规则 并将transition: 0.5s; 放在a 的规则中：

a {
  transition: 0.5s;
  padding: 0.5em 0.75em;
  border: 1px solid red;
  color: #000;
  display: inline-block;
}

a:hover{
  color: #f00;
  background-color: #0f0;
}

<a>
   <span>Text Content</span>
</a>

Answer 2

user3360686 是对的，您的转换以某种方式堆叠。我不确定它为什么会发生，因为它不应该发生。

无论如何，您在标题中所做的事情都是危险的，并且可能会引发奇怪的行为：

header * {
  transition: all 0.8s;
  -moz-transition: all 0.8s; 
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;

  transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
}

您的标题中有大约 25 个元素，过渡和延迟将应用于每个元素。使用特定元素来提高效率（和优雅）。

在过渡中使用“all”通常是个坏主意，它们是制造冲突的好方法。使用特定的属性。

这个快速而漂亮的答案总结了几乎所有内容： CSS3, WebKit Transition Order? How to queue to the transitions?

Answer 3

我遇到了同样的问题。我的问题是我试图转换最初从父母那里继承的属性。事实证明，Webkit 浏览器（不是 Firefox）要求您要转换的每个属性都实际应用于该元素。似乎它们无法转换已继承的属性。

例如，我试图这样做：

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent {
    color: #000;
}

.child {
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
    border-top: 10px #000 solid;
 }

.child.active {
    border-color: #ff0000;
    color: #ff0000;
}

Firefox 设法做到了这一点，但 Chrome 和 Safari 都需要这样做：

.child {
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
    border-top: 10px #000 solid;
    // even though the color property is inherited,
    // webkit requires it for transitions
    color: #000;
 }

Answer 4

意外延迟的另一个原因是overflow: hidden;。例如，如果您有一个下拉切换导航栏：当它被切换打开时，max-height 设置为 1000px，同时还具有 CSS 属性 overflow: hidden;，从其 max-height 转换到关闭。

Answer 5

遇到这个问题，因为我有同样的错误。

我的 CSS 中有这个：

:root {
    --duration-fast: 0.2s ease-in-out;
}

* {
    transition: color var(--duration-fast),
    border-color var(--duration-fast),
    border var(--duration-fast),
    transform var(--duration-fast),
    opacity var(--duration-fast),
    margin var(--duration-fast),
    box-shadow var(--duration-fast),
    text-shadow var(--duration-fast);
}

原来这不是一个好主意...这是我修复它的方法：

:root {
    --duration-fast: 0.2s ease-in-out;

    --transition-fast: color var(--duration-fast),
    border-color var(--duration-fast),
    border var(--duration-fast),
    transform var(--duration-fast),
    opacity var(--duration-fast),
    margin var(--duration-fast),
    box-shadow var(--duration-fast),
    background var(--duration-fast),
    text-shadow var(--duration-fast);
}

现在，当我想要一个带有转换的元素（不指定所有转换）时，我只是这样做：

.my-component {
    transition: var(--transition-fast);
}