CSS过渡:Webkit浏览器(Chrome和Safari)中奇怪的不必要的延迟

Question

我希望有人能帮助解释我在 Webkit 浏览器中遇到的奇怪行为，以及 CSS 过渡中不必要的延迟。

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

所需的结果是菜单栏在用户向下滚动页面时缩小。这在火狐中完美地动画。

但是，在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 转换顺序？如何排队过渡？

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);
}