CSS3 transition規范的使用經驗

近年來網站如雨後春筍般大批的出現在網絡上,對於網站來說web後端開發也變得越來越重要。下面就讓我們來了解一下CSS3 transition規范的使用經驗。

關於具體解決方法或如何規避問題的意見可以參考另一篇非常有見地的文章，“All You Need to Know About CSS Transitions”。Alex MacCaw講述的是關於實現特定的效果，而我要談的是技術背景，主要討論在使用CSS過渡的過程中所未預料到的問題。

結構 (HTML)，表現(CSS)，以及行為(JavaScript)相分離並不是什麼新鮮的事情，然而 CSS 能跨越這個界限並且可以在短期內得到實際的應用，這還真的是一個完全不同的討論話題。

幾周前，我開發一個 JavaScript 模塊，在能夠使用 CSS 過渡的條件下，JavaScript 端又無法獲取到實現過渡的方式。實際遇到的問題是這兩者根本沒有辦法同步，經過多次的測試後，我只能放棄。而我的測試結果正是本文所講述的。

首先，我們要說一下getcomputedstyle()，是一種用 JavaScript 返回浏覽器渲染CSS的屬性值的方法。 這個方法可以查看“DOM Level 2: getComputedStyle()”和“CSS Level 2: Computed Values”。

這對於像 font-size 這樣的屬性, 通過一個參數便可以轉換為像素值。 但對於可以縮寫的屬性值，例如 margin ，一些浏覽器則返回為空。再就是那些同一屬性的不同屬性值，例如 font-weight 的值 bold 和700。WebKit也有一個小bug，它會從偽對象中提取出屬性值。

這裡所講述的浏覽器之間的差異是2013年1月在使用 Firefox18(Gecko)，Opera 12.12 (Presto), Internet Explorer10(Trident)，Safari 浏覽器6.0.2(WebKit)，Chrome 23(WebKit) 以及 Gecko 和 WebKit的 Nightly build channels。

事不宜遲，讓我們來一起看一下規范與實際情況的差異，為了方便，我省略了各浏覽器的前綴。在文中我通過創建一個 CSS3 Transitions Test Suite 來發現問題。

1、指定過渡

CSS3 transitions 規范定義了以下四個 CSS 屬性：

transition-property

transition-duration

transition-delay

transition-timing-function

過渡屬性

transition-property 是用來指定當元素其中一個屬性改變時執行 transition 效果。系統默認值是 all，這意味著浏覽器能夠以動畫形式呈現所有的可過渡屬性(transition-duration持續時間超過0s)，該屬性支持單個值或以逗號隔開的多個值列表(跟其他所有transition-*屬性一樣)。

規范規定，一個浏覽器應該接受並保存任何它不能識別的屬性。因此，下面的例子中將會看到持續2秒的 padding 過渡：

1

2

transition-property:foobar,padding;

transition-duration:1s,2s;

不同於規范的是，上面的情況在 WebKit 下會解析為 transition-property: all。 而 Firefox 和 Opera 會解析為 transition-property: all, padding.

過渡持續時間

transition-duration 屬性規定了一個過渡從初始狀態到目標狀態的持續時間。它接受以秒或毫秒的值(例如，2.3S和2300ms都是指2.3秒)。

盡管規范明確規定了過渡值必須為正數，但 Opera 仍接受-5S的值，至少對於getComputedStyle()來說是這樣的。雖然規范中並沒有限制屬性值的大小，但 Opera 和 IE 不接受低於10ms的值。而 WebKit 在 getComputedStyle()執行中有個小bug，例如：返回值0.009999999776482582s會取代0.01s。

過渡延遲時間

transition-delay 屬性規定了在執行一個過渡之前的等待時間，同樣使用值。Delay 可以是負值，但這會導致動畫無法平滑過渡。

IE 和 Opera 不接受 transition-duration 在-10ms和10ms之間的值。WebKit 的 floating point 也會在這兒出現。

transition-timing-function 屬性規定了過渡效果的時間曲線。包括cubic-bezier(x1, y1, x2, y2), step(, start|end)，和預先定義的 cubic-bezier 曲線關鍵詞，linear, ease, ease-in, ease-out和ease-in-out。在使用 LEA Verou 特有的 cubic-bezier 曲線編輯器時，cubic-bezier 背後的公式就變得不再重要。盡管 cubic-bezier 曲線會平滑過渡，但是step()函數會在一個固定的間隔跳到下一個值。這樣便會產生逐幀動畫的效果;如“Pure CSS3 Typing Animation With steps()”。

linear 的計算值通常表示為 cubic-bezier(0, 0, 1, 1)—— WebKit除外。但 WebKit 仍然會返回 cubic-bezier(0.25, 0.1, 0.25, 1)，而不是 ease。規范規定 X 值的必須介於0和1之間，y 值可以超過該范圍，而WebKit 允許 X 超過此范圍，而 Android 浏覽器(4.0版本)卻混淆了x和y的范圍。

2 過渡完成

我前面已經提到了 CSS 過渡異步運行的問題。規范提及了 TransitionEnd 事件允許 JavaScript 與已完成的過渡同步進行。但可惡的是該規范對此並沒具體闡述。事實上，它只是簡單地說明單個事件會因為已完成過渡的屬性而被終止。

規范指出縮寫屬性(如padding)應為包括其在內的所有屬性(padding-top，padding-right，等等)實現過渡，它並沒有說哪個屬性應該在 TransitionEnd 事件中被具體命名。然而即使過渡被定義為縮寫屬性(如padding)，Gecko，Trident 和 Presto 對於普通書寫的子屬性(如padding-top)同樣可以實現過渡，而 WebKit 則會阻止過渡。 如果你指定 transition-property: padding，WebKit 會為 padding 執行過渡, 但 transition-property: all 這樣就會針對 padding-left 執行新的過渡。而當 padding 正執行過渡時， iPhone 6.0.1 的 Safari 浏覽器在也可以執行 font-size 和 line-height的過渡。

1

2

.example{padding:1px;transition-property:padding;transition-duration:1s;}

.example:hover{padding:10px;}

以上 CSS 將在不同浏覽器下觸發不同的 TransitionEnd：

Gecko,Trident,Presto:

padding-top,padding-right,padding-bottom,padding-left

WebKit:

padding

1

2

.example {padding: 1px;transition-property: all, padding;transition-duration:1s;}

.example:hover{padding:10px;}

以上 CSS 將在不同浏覽器下觸發不同的TransitionEnd：

Gecko,Trident,Presto,WebKit:

padding-top,padding-right,padding-bottom,padding-left

Safari 6.0.1 on iPhone:

padding-top, padding-right, padding-bottom, padding-left, font-size, line-height

你可以指定負值 transition-delay 來“快速實現”轉換。但是transition-duration: 1s; transition-delay: -1s; 在 Gecko 和 WebKit 下執行轉換並會立即跳轉至目標值。而Trident 和 Presto 將不會觸發任何事件。

WebKit在 getComputedStyle() 上遇到的浮點問題也同樣存在於 TransitionEnd.elapsedTime 中，所有的浏覽器如此。 Math.round(event.elapsedTime * 1000) / 1000 可輔助修復。

WebKit 和 IE 浏覽器下執行 background-position，會觸發對 background-position-x 和 background-position-y 的 TransitionEnd，而不是 background-position 的TransitionEnd。

所以，即使你知道過渡正在執行，你也不能依賴已有的 TransitionEnd.propertyName。盡管你可以編寫大量的 JavaScript 來彌補，但在沒有對每一個屬性進行恰當性能檢測的情況下，即使你采用最新方法也將無法實現。

3 過渡屬性

規范列出了浏覽器支持動畫過渡的一些CSS屬性。當然也包括CSS2.1的屬性。還有一些可以動態變化的新屬性，如 Flexible Box Layout。

該屬性數值類型非常重要。margin-top 接受和值，但根據可過渡CSS屬性列表，只有是可實現動畫效果。但這並不能讓浏覽器開發商避開值實現過渡。然而，word-spacing 屬性除外。該屬性包括值，但沒有浏覽器能以動畫形式顯示。

撇開 TransitionEnd 事件，如果在過渡發生的指定時間內，getComputedStyle()值從A變到B，該屬性就會從值A過渡為值B。如果沒有執行，例如“CSS屬性值發生變化”，那麼也許應該仔細核查下DOM。setTimeout()的解析度還不夠好以達到快速過渡(小於幾百毫秒的持續時間)，這時候requestAnimationFrame()就是你的幫手。在重繪前會提醒你，並提供了一些中間值供參考。除了opera，其他的都可以支持。

4 過渡屬性的優先級

transition-property 規范允許多次過渡單個屬性，如果單個屬性在“過渡屬性”中的值被多次指定，過渡將通過持續時間，延遲和時間曲線給出的值來實現。因此，我們可以實現 padding 過渡持續1秒，padding-left 過渡持續2秒; 或使用 transition-property: all 來定義默認屬性類型並重置特定屬性。

在 Firefox 和 IE 浏覽器上，這些都沒有任何問題。 但 opera下會混淆優先順序。它認為 padding-left 比padding 和 all 更加具體，而不是簡單地使用最後一個屬性。

最大的問題是WebKit。如果一個屬性被多次指定，它將進行多次過渡。 如果想讓WebKit崩潰，嘗試用transition-duration ：0.1秒運行transition-property: padding, padding-left，WebKit將至少執行兩次過渡。但更有意思的是，TransitionEnd可以進行上百次的單一過渡。

5 auto的轉變

CSS 屬性中的 auto 值能夠自適應寬度，如果塊級元素設置了width: auto，那麼就會繼承父級的寬度。有時你需要從 width: auto 改變到一個具體寬度，並且需要過渡那個改變。當然本規范並沒有強制或否定 auto 值可用於過渡。

Firefox，IE 和 Opera 無法從 or 值過渡到 auto 值。 IE 下有 z-index 有一點點例外，但僅此而已。 另一方面，WebKit 能夠從and 過渡到