本篇文章主要講述CSS3 transition規(guī)范和在不同瀏覽器之間的使用差異，關(guān)于具體解決方法或如何規(guī)避問題的意見可以參考另一篇非常有見地的文章，“All You Need to Know About CSS Transitions”。Alex MacCaw講述的是關(guān)于實現(xiàn)特定的效果，而我要談的是技術(shù)背景，主要討論在使用CSS過渡的過程中所未預(yù)料到的問題。
結(jié)構(gòu) (HTML)，表現(xiàn)(CSS)，以及行為(JavaScript)相分離并不是什么新鮮的事情，然而 CSS 能跨越這個界限并且可以在短期內(nèi)得到實際的應(yīng)用，這還真的是一個完全不同的討論話題。
幾周前，我開發(fā)一個 JavaScript 模塊，在能夠使用 CSS 過渡的條件下，JavaScript 端又無法獲取到實現(xiàn)過渡的方式。實際遇到的問題是這兩者根本沒有辦法同步，經(jīng)過多次的測試后，我只能放棄。而我的測試結(jié)果正是本文所講述的。
首先，我們要說一下getcomputedstyle()，是一種用 JavaScript 返回瀏覽器渲染CSS的屬性值的方法。 這個方法可以查看“DOM Level 2: getComputedStyle()”和“CSS Level 2: Computed Values”。
這對于像 font-size 這樣的屬性, 通過一個參數(shù)便可以轉(zhuǎn)換為像素值。 但對于可以縮寫的屬性值，例如 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。
事不宜遲，讓我們來一起看一下規(guī)范與實際情況的差異，為了方便，我省略了各瀏覽器的前綴。在文中我通過創(chuàng)建一個 CSS3 Transitions Test Suite 來發(fā)現(xiàn)問題。
1、指定過渡
CSS3 transitions 規(guī)范定義了以下四個 CSS 屬性：
transition-propertytransition-durationtransition-delaytransition-timing-function
過渡屬性
transition-property 是用來指定當(dāng)元素其中一個屬性改變時執(zhí)行 transition 效果。系統(tǒng)默認(rèn)值是 all，這意味著瀏覽器能夠以動畫形式呈現(xiàn)所有的可過渡屬性（transition-duration持續(xù)時間超過0s），該屬性支持單個值或以逗號隔開的多個值列表（跟其他所有transition-*屬性一樣）。
規(guī)范規(guī)定，一個瀏覽器應(yīng)該接受并保存任何它不能識別的屬性。因此，下面的例子中將會看到持續(xù)2秒的 padding 過渡：transition-property:foobar,padding;
transition-duration:1s,2s;復(fù)制代碼不同于規(guī)范的是，上面的情況在 WebKit 下會解析為 transition-property: all。 而 Firefox 和 Opera 會解析為 transition-property: all, padding.
過渡持續(xù)時間
transition-duration 屬性規(guī)定了一個過渡從初始狀態(tài)到目標(biāo)狀態(tài)的持續(xù)時間。它接受以秒或毫秒的值（例如，2.3S和2300ms都是指2.3秒）。
盡管規(guī)范明確規(guī)定了過渡值必須為正數(shù)，但 Opera 仍接受-5S的值，至少對于getComputedStyle（）來說是這樣的。雖然規(guī)范中并沒有限制屬性值的大小，但 Opera 和 IE 不接受低于10ms的值。而 WebKit 在 getComputedStyle（）執(zhí)行中有個小bug，例如：返回值0.009999999776482582s會取代0.01s。
過渡延遲時間
transition-delay 屬性規(guī)定了在執(zhí)行一個過渡之前的等待時間，同樣使用值。Delay 可以是負(fù)值，但這會導(dǎo)致動畫無法平滑過渡。
IE 和 Opera 不接受 transition-duration 在-10ms和10ms之間的值。WebKit 的 floating point 也會在這兒出現(xiàn)。
transition-timing-function 屬性規(guī)定了過渡效果的時間曲線。包括cubic-bezier（x1, y1, x2, y2）, step（, start|end），和預(yù)先定義的 cubic-bezier 曲線關(guān)鍵詞，linear, ease, ease-in, ease-out和ease-in-out。在使用 LEA Verou 特有的 cubic-bezier 曲線編輯器時，cubic-bezier 背后的公式就變得不再重要。盡管 cubic-bezier 曲線會平滑過渡，但是step()函數(shù)會在一個固定的間隔跳到下一個值。這樣便會產(chǎn)生逐幀動畫的效果；如“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。規(guī)范規(guī)定 X 值的必須介于0和1之間，y 值可以超過該范圍，而WebKit 允許 X 超過此范圍，而 Android 瀏覽器（4.0版本）卻混淆了x和y的范圍。
2 過渡完成
我前面已經(jīng)提到了 CSS 過渡異步運行的問題。規(guī)范提及了 TransitionEnd 事件允許 JavaScript 與已完成的過渡同步進(jìn)行。但可惡的是該規(guī)范對此并沒具體闡述。事實上，它只是簡單地說明單個事件會因為已完成過渡的屬性而被終止。
規(guī)范指出縮寫屬性（如padding）應(yīng)為包括其在內(nèi)的所有屬性（padding-top，padding-right，等等）實現(xiàn)過渡，它并沒有說哪個屬性應(yīng)該在 TransitionEnd 事件中被具體命名。然而即使過渡被定義為縮寫屬性（如padding），Gecko，Trident 和 Presto 對于普通書寫的子屬性（如padding-top）同樣可以實現(xiàn)過渡，而 WebKit 則會阻止過渡。 如果你指定 transition-property: padding，WebKit 會為 padding 執(zhí)行過渡, 但 transition-property: all 這樣就會針對 padding-left 執(zhí)行新的過渡。而當(dāng) padding 正執(zhí)行過渡時， iPhone 6.0.1 的 Safari 瀏覽器在也可以執(zhí)行 font-size 和 line-height的過渡。.example{padding:1px;transition-property:padding;transition-duration:1s;}
.example:hover{padding:10px;}復(fù)制代碼以上 CSS 將在不同瀏覽器下觸發(fā)不同的 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;}復(fù)制代碼以上 CSS 將在不同瀏覽器下觸發(fā)不同的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
你可以指定負(fù)值 transition-delay 來“快速實現(xiàn)”轉(zhuǎn)換。但是transition-duration: 1s; transition-delay: -1s; 在 Gecko 和 WebKit 下執(zhí)行轉(zhuǎn)換并會立即跳轉(zhuǎn)至目標(biāo)值。而Trident 和 Presto 將不會觸發(fā)任何事件。
WebKit在 getComputedStyle() 上遇到的浮點問題也同樣存在于 TransitionEnd.elapsedTime 中，所有的瀏覽器如此。 Math.round(event.elapsedTime * 1000) / 1000 可輔助修復(fù)。
WebKit 和 IE 瀏覽器下執(zhí)行 background-position，會觸發(fā)對 background-position-x 和 background-position-y 的 TransitionEnd，而不是 background-position 的TransitionEnd。
所以，即使你知道過渡正在執(zhí)行，你也不能依賴已有的 TransitionEnd.propertyName。盡管你可以編寫大量的 JavaScript 來彌補，但在沒有對每一個屬性進(jìn)行恰當(dāng)性能檢測的情況下，即使你采用最新方法也將無法實現(xiàn)。
3 過渡屬性
規(guī)范列出了瀏覽器支持動畫過渡的一些CSS屬性。當(dāng)然也包括CSS2.1的屬性。還有一些可以動態(tài)變化的新屬性，如 Flexible Box Layout。
該屬性數(shù)值類型非常重要。margin-top 接受和值，但根據(jù)可過渡CSS屬性列表，只有是可實現(xiàn)動畫效果。但這并不能讓瀏覽器開發(fā)商避開值實現(xiàn)過渡。然而，word-spacing 屬性除外。該屬性包括值，但沒有瀏覽器能以動畫形式顯示。
撇開 TransitionEnd 事件，如果在過渡發(fā)生的指定時間內(nèi)，getComputedStyle（）值從A變到B，該屬性就會從值A(chǔ)過渡為值B。如果沒有執(zhí)行，例如“CSS屬性值發(fā)生變化”，那么也許應(yīng)該仔細(xì)核查下DOM。setTimeout()的解析度還不夠好以達(dá)到快速過渡（小于幾百毫秒的持續(xù)時間），這時候requestAnimationFrame()就是你的幫手。在重繪前會提醒你，并提供了一些中間值供參考。除了opera，其他的都可以支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
