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已经完成了它的动画。

上述示例的最佳解决方法是删除规则 fora, 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个元素，过渡和延迟将应用于每个元素。使用特定元素可以提高效率（和优雅度）。

在过渡中使用“全部”通常是一个坏主意，它们是引发冲突的好方法。使用特定的属性。

这个快速而好听的答案几乎概括了所有内容： CSS3，WebKit转换顺序？如何排队过渡？

Answer 3

我遇到了同样的问题。我的问题是我试图转换最初从父级继承的属性。事实证明，Webkit 浏览器（不是 Firefox）需要将要转换的每个属性实际应用于该元素。他们似乎无法转移已继承的财产。

例如，我试图这样做：

超文本标记语言

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