CSS轉換：Webkit瀏覽器中奇怪的不必要的延遲（Chrome和Safari）

Question

我希望有人能夠幫助解釋我在Webkit瀏覽器中遇到的奇怪行爲，並在CSS轉換中出現不必要的延遲。

這裏是我工作的網頁的鏈接：http://demo.daised.com/help-me

期望得到的結果是菜單欄縮小爲用戶向下滾動頁面。這在Firefox中完美動畫。

但是，在Webkit瀏覽器中，導航項的字體大小過渡延遲了6（！）秒。

感謝您幫助我更好地理解這一點。

Answer 1

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 2

問題由堆疊的轉變上繼承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>

a, span CSS的部分適用過渡到兩個元件。 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 3

的另一個原因是不必要的延誤是overflow: hidden; 。例如，如果您有下拉切換導航欄：當它被切換打開，並且max-height設置爲1000px，同時也具有CSS屬性overflow: hidden;時，從max-height轉換爲關閉需要更長的時間。

Answer 4

我遇到了同樣的問題。我的問題是，我試圖過渡最初從父項繼承的屬性。事實證明，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; 
} 

火狐成功地做到這一點，但Chrome和Safari都需要這樣的：

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