CSS3 transition規範的實際使用經驗

　　本篇文章主要講述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 過渡：

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的過渡。

.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

.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 過渡到幾乎可以接受 auto 值的任意CSS 屬性。WebKit 不太喜歡 clip；因為這個屬性，它只會引發 TransitionEnd 過渡，而過渡期間不會產生或顯示任何中間值或狀態。
對於其他屬性，如 width 和 height，WebKit 下會有一些差異。如果 width: auto 過渡為 300px 的寬度，然後再過渡成 100px，那麼過渡不會從 300 縮至100 畫素。它會從 0 增加到 100 畫素。

　　關於完整的相容性列表，可以檢視“CSS Animatable Properties.”

　　6 隱式過渡

　　隱式過渡發生在當一個屬性的改變引起另一個屬性被過渡的時候, 或者當你想改變一個父級元素中的屬性, 會導致子元素不論是繼承過渡或附屬屬性的過渡。font-size: 18px, padding: 2em—–padding 會被計算為 2 × font-size， em 就是36畫素。

　　有各種各樣的相對值型別：, , em, rem, vh, vw等等。使用一個相對值，如 padding: 2em，讓瀏覽器重新計算屬性的 getComputedValue()，每次應變數（如font-size）都會發生改變。由於計算樣式改變,將反過來導致 padding 的過渡。這種過渡被定義為“隱式過渡”，因為padding屬性值沒有被修改。

　　大多數瀏覽器會實現這種隱式過渡。除了 IE 10，只對 line-height 屬性執行隱式過渡。除了 vertical-align 外，Webkit 可以針對其他所有屬性執行隱式過渡。除了字型相對屬性值，還有寬度相對屬性值（通常為），相對屬性值（如vh和vw），預設初始值（Opera中的column-gap: 1em），還有“currentColor”。所有這些都有可能會，也可能不會引起隱式過渡。

　　在 Firefox 中, 當繼承和附屬屬性執行過渡，但他們的 transition-duration 或 transition-delay 並沒有隨著過渡, 這些隱式過渡就會變得特別有趣。 而 Webkit 和 Opera 執行過渡時會很有視覺感，但 Firefox 會稍顯錯亂。在IE中不會輕易執行隱式過渡。

　　另外，別忘了繼承, DOM 元素的 font-size 將會由其子元素繼承，只要不被覆蓋，就可能引起隱式過渡。

　　7 轉換和偽元素

　　偽元素（:before和:after），在 CSS2 中已經有了介紹. 如果不熟悉可以檢視 “Learning to Use the :before and :after Pseudo-Elements in CSS”。 雖然 CSS3 中定義了額外的偽元素（::alternate,::outside），但是他們（到目前為止）還並沒有被支援。因此所有 CSS 動畫屬性也應該是偽元素的動畫屬性。

　　Firefox 和 IE 10 可以在偽元素上實現屬性過渡. 而 Opera，Chrome 和 Safari 則不會。 WebKit 從2013年一月起也開始支援。

　　偽元素的過渡會導致內容自身產生一些新問題，因為在生成內容時 TransitionEnd 過渡根本還沒有結束。 在某一時間段內，他們理應在主元素上被觸發，並通過 TransitionEnd.pseudoElement 提供偽元素，但即便是“CSS動畫過渡”的“過渡事件”部分，編寫者的方案也並沒有指定哪一個最合適。

　　我們想要改變 content 屬性值，因此IE 8將在特殊情況下（比如:hover狀態）將會重新渲染該元素。結果表明，對老的IE版本進行相容會影響到所有其他瀏覽器的效率。所以, 當試圖在偽元素上進行屬性過渡時，要確保 content 的值不會被改變。

　　如果主元素沒有執行:hover狀態，那麼 IE 10 將不針對偽元素“:hover”執行過渡。

.some-selector:before{content:"hello";color:red;transition:all 1s linear 0s;}
.some-selector:hover:before{color:green;}

　　在 IE10 下，:before在 mouseover 的時候，:hover 是一定要定義的。

　　這個問題在於不是一定要求你定義主元素:hover 狀態。而是如果沒有定義，IE 10 會將:hover解釋為:active。更奇怪的是，:active狀態甚至會在 mouseup 後繼續持續，而當你再次點選就會取消。

　　8 背景標籤

　　在編輯標籤時，IE 10 是唯一可對背景或前景響應的瀏覽器，如果標籤變為背景後，雖然它會完成正在執行的過渡，但它不會執行新的過渡。IE 10 將等到標籤變為前景後再執行新過渡。幸運的是，IE 10 已經支援頁面的可見性 API，允許開發人員應對這種操作行為。

　　9 隱藏元素

　　對於隱藏的元素,過渡是不會被執行的，因為大多數瀏覽器都明確認為沒有必要在一個看不見的元素裡執行過渡。然而，也有特例，在 Opera 下無論元素隱藏與否它都將執行過渡。

　　10 過渡之前，DOM樹是否載入完畢

　　當文件脫離解析模式時，DOMContentLoaded 被觸發，如果你在使用 jquery，那麼應該瞭解 jQuery.ready()，過渡可以在這之前執行。

　　11 渲染差異

　　這個問題我之前已經說過了, 本文就是基於我的測試結果進行闡述的。測試是自動執行的，但事實證明，還是發現了很多問題。
當時要實現從漸變到漸變的背景過渡是不可能的，但可以實現從漸變到純色的過渡。如果漸變正在進行中，從白色到目標顏色的過渡即將開始，在過渡啟動時,會看到白色在快速閃動。目前所有的瀏覽器中都可以察覺到這一點。

　　不過Firefox 似乎是用不同的演算法來渲染影象的，以表明它們執行了動畫過渡（見例項）。很顯然，在動畫過渡時， Gecko 並沒有呈現好的效果。如果 transform: scale() 足夠低，這種情況將發生。

　　Firefox 不會從 a:visited 到 a:hover 過程中過渡動畫，反之亦然。 但它會從 a:visited 直接跳到 a:link，然後過渡到 a:hover 狀態， 你可以在這個例子中看到，這是在 Mozilla Developer Network”Privacy and the :visited Selector”中提到的。然而 IE 10 與 Chrome，Safari 和 Opera 瀏覽器一樣，會從a:link到a:visited實現過渡。
如果子元素的 position 改變時， Firefox 不會觸發元素的屬性, 而 WebKit，Opera 和 IE 10 則會觸發。

　　12 對規範的建議

　　看完了整個規範並對所有功能進行了測試之後，覺得如果能進行以下優化將會更好:

• 加入TransitionsEnd（注意是複數），一個元素的所有過渡一旦完成就啟動觸發。它能告知一系列已被觸發的屬性，但是不需要知道哪些已被過渡， 只要知道所有的動畫過渡何時可以完成即可。
• 加入 TransitionStart 任務，以便可以獲取每個待過渡屬性。因為 JavaScript 的事件迴圈和渲染路徑不一定能互相牽制，單一的 TransitionsStart（也會重複多次）可能是更好的解決方案。我不知道為什麼要 cancel 任務，所以這就叫“操作後就不再管”。
• 要明確哪些 TransitionEnd 需要被觸發，前面舉例的 WebKit 中 padding 和 padding-left 的問題會讓人很頭疼。
• 要明確說明“隱形過渡”如何處理, 前面例子中 transition-property: font-size的line-height: 1em 應該要有明確的處理方式。
• 需要新增那些允許定義 pointer-events: none 並防止意外懸停狀態的::transitioning偽類，這裡防止濫用樣式，因為他們自身會引發新的過渡或者改變正在進行的過渡。除了這些建議，我們還需要能在不大量使用 JavaScript 進行輔助的情況下進行一些常規操作。
• 有時候你需要禁用過渡。例如，為了在網站訪問者面前呈現完美過渡之前，你需要調整佈局並對尺寸規格進行精確測算對位置進行完美佈局。
• 有時你想立即從 DOM 中移除一個物件。你可以新增一個類，等待 TransitionEnd 完成後再進行刪除。
• 跟刪除物件一樣，你想要新增一個新元素。你可插入這個元素，設定“隱藏”以實現新元素的樣式變化。
• 重新排序，隱藏和顯示元素都比較常見。針對這些進行樣式操作就要像操作實用程式一樣，如 Isotope。

　　13 使用delay

　　使用延時，可以很好的解決無意的滑鼠懸停造成的樣式變化，如同setTimeout()。

　　14 總結(可參考前面談到過的例項)

• 使用 transition-property: all 時注意，否則將遇到本不需要進行轉換的 TransitionEnd 情況。
• 當使用可縮寫屬性時，觸發事件的數量會根據不同瀏覽器而不同。
• Opera 和 IE 不支援延遲時間為負值。
• Webkit在屬性優先順序上存在問題，例如：要避免transition-property: margin, margin-left的情況。
• IE不支援隱式轉換。
• Firefox和Opera無法解析 transition-property: all, width。
• Opera 混淆了屬性的優先順序。
• 偽元素的過渡不會影響 TransitionEnd。
• 偽元素的過渡在 IE 10 下會出現:hover的bug。

　　原文出處：Rodney Rehm