結(jié)構(gòu) (HTML)，表現(xiàn)(CSS)，以及行為(JavaScript)相分離并不是什么新鮮的事情，然而 CSS 能跨越這個(gè)界限并且可以在短期內(nèi)得到實(shí)際的應(yīng)用，這還真的是一個(gè)完全不同的討論話題。

幾周前，我開發(fā)一個(gè) JavaScript 模塊，在能夠使用 CSS 過渡的條件下，JavaScript 端又無法獲取到實(shí)現(xiàn)過渡的方式。實(shí)際遇到的問題是這兩者根本沒有辦法同步，經(jīng)過多次的測(cè)試后，我只能放棄。而我的測(cè)試結(jié)果正是本文所講述的。

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

這對(duì)于像 font-size 這樣的屬性, 通過一個(gè)參數(shù)便可以轉(zhuǎn)換為像素值。 但對(duì)于可以縮寫的屬性值，例如 margin ，一些瀏覽器則返回為空。再就是那些同一屬性的不同屬性值，例如 font-weight 的值 ?bold ?和700。WebKit也有一個(gè)小bug，它會(huì)從偽對(duì)象中提取出屬性值。

這里所講述的瀏覽器之間的差異是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ī)范與實(shí)際情況的差異，為了方便，我省略了各瀏覽器的前綴。在文中我通過創(chuàng)建一個(gè)?CSS3 Transitions Test Suite?來發(fā)現(xiàn)問題。

1、指定過渡

CSS3 transitions 規(guī)范定義了以下四個(gè) CSS 屬性：

• transition-property
• transition-duration
• transition-delay
• transition-timing-function

過渡屬性

transition-property 是用來指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行 transition 效果。系統(tǒng)默認(rèn)值是 all，這意味著瀏覽器能夠以動(dòng)畫形式呈現(xiàn)所有的可過渡屬性（transition-duration持續(xù)時(shí)間超過0s），該屬性支持單個(gè)值或以逗號(hào)隔開的多個(gè)值列表（跟其他所有transition-*屬性一樣）。

規(guī)范規(guī)定，一個(gè)瀏覽器應(yīng)該接受并保存任何它不能識(shí)別的屬性。因此，下面的例子中將會(huì)看到持續(xù)2秒的 padding 過渡：

12

transition-property:foobar,padding;transition-duration:1s,2s;

不同于規(guī)范的是，上面的情況在 WebKit 下會(huì)解析為 transition-property: all。 而 Firefox 和 Opera 會(huì)解析為 transition-property: all, padding.

過渡持續(xù)時(shí)間

transition-duration 屬性規(guī)定了一個(gè)過渡從初始狀態(tài)到目標(biāo)狀態(tài)的持續(xù)時(shí)間。它接受以秒或毫秒的值（例如，2.3S和2300ms都是指2.3秒）。

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

過渡延遲時(shí)間

transition-delay 屬性規(guī)定了在執(zhí)行一個(gè)過渡之前的等待時(shí)間，同樣使用值。Delay 可以是負(fù)值，但這會(huì)導(dǎo)致動(dòng)畫無法平滑過渡。

IE ?和 ?Opera 不接受 transition-duration 在-10ms和10ms之間的值。WebKit 的 floating point 也會(huì)在這兒出現(xiàn)。

過渡時(shí)間曲線

transition-timing-function 屬性規(guī)定了過渡效果的時(shí)間曲線。包括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 曲線編輯器時(shí)，cubic-bezier 背后的公式就變得不再重要。盡管 cubic-bezier 曲線會(huì)平滑過渡，但是step（）函數(shù)會(huì)在一個(gè)固定的間隔跳到下一個(gè)值。這樣便會(huì)產(chǎn)生逐幀動(dòng)畫的效果；如“Pure CSS3 Typing Animation With steps()”。

linear 的計(jì)算值通常表示為 cubic-bezier（0, 0, 1, 1）—— ?WebKit除外。但 WebKit 仍然會(huì)返回 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 過渡異步運(yùn)行的問題。規(guī)范提及了 TransitionEnd 事件允許 JavaScript 與已完成的過渡同步進(jìn)行。但可惡的是該規(guī)范對(duì)此并沒具體闡述。事實(shí)上，它只是簡(jiǎn)單地說明單個(gè)事件會(huì)因?yàn)橐淹瓿蛇^渡的屬性而被終止。

規(guī)范指出縮寫屬性（如padding）應(yīng)為包括其在內(nèi)的所有屬性（padding-top，padding-right，等等）實(shí)現(xiàn)過渡，它并沒有說哪個(gè)屬性應(yīng)該在 TransitionEnd 事件中被具體命名。然而即使過渡被定義為縮寫屬性（如padding），Gecko，Trident 和 Presto 對(duì)于普通書寫的子屬性（如padding-top）同樣可以實(shí)現(xiàn)過渡，而 WebKit 則會(huì)阻止過渡。 如果你指定 transition-property: padding，WebKit 會(huì)為 padding 執(zhí)行過渡, 但 transition-property: all 這樣就會(huì)針對(duì) padding-left 執(zhí)行新的過渡。而當(dāng) padding 正執(zhí)行過渡時(shí)， iPhone 6.0.1 的 Safari 瀏覽器在也可以執(zhí)行?font-size 和 line-height的過渡。

12

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

以上 CSS 將在不同瀏覽器下觸發(fā)不同的?TransitionEnd：

Gecko,Trident,Presto:

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

WebKit:

padding

12

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

以上 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 來“快速實(shí)現(xiàn)”轉(zhuǎn)換。但是transition-duration: 1s; transition-delay: -1s; 在 Gecko 和 WebKit 下執(zhí)行轉(zhuǎn)換并會(huì)立即跳轉(zhuǎn)至目標(biāo)值。而Trident 和 Presto 將不會(huì)觸發(fā)任何事件。

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

WebKit 和 IE 瀏覽器下執(zhí)行 background-position，會(huì)觸發(fā)對(duì) background-position-x 和 background-position-y 的 TransitionEnd，而不是 background-position 的TransitionEnd。

所以，即使你知道過渡正在執(zhí)行，你也不能依賴已有的 TransitionEnd.propertyName。盡管你可以編寫大量的 JavaScript 來彌補(bǔ)，但在沒有對(duì)每一個(gè)屬性進(jìn)行恰當(dāng)性能檢測(cè)的情況下，即使你采用最新方法也將無法實(shí)現(xiàn)。

3 過渡屬性

規(guī)范列出了瀏覽器支持動(dòng)畫過渡的一些CSS屬性。當(dāng)然也包括CSS2.1的屬性。還有一些可以動(dòng)態(tài)變化的新屬性，如Flexible Box Layout。

該屬性數(shù)值類型非常重要。margin-top 接受和值，但根據(jù)可過渡CSS屬性列表，只有是可實(shí)現(xiàn)動(dòng)畫效果。但這并不能讓瀏覽器開發(fā)商避開值實(shí)現(xiàn)過渡。然而，word-spacing 屬性除外。該屬性包括值，但沒有瀏覽器能以動(dòng)畫形式顯示。

撇開 TransitionEnd 事件，如果在過渡發(fā)生的指定時(shí)間內(nèi)，getComputedStyle（）值從A變到B，該屬性就會(huì)從值A(chǔ)過渡為值B。如果沒有執(zhí)行，例如“CSS屬性值發(fā)生變化”，那么也許應(yīng)該仔細(xì)核查下DOM。setTimeout（）的解析度還不夠好以達(dá)到快速過渡（小于幾百毫秒的持續(xù)時(shí)間），這時(shí)候requestAnimationFrame()就是你的幫手。在重繪前會(huì)提醒你，并提供了一些中間值供參考。除了opera，其他的都可以支持。

4 過渡屬性的優(yōu)先級(jí)

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

在 Firefox 和 IE 瀏覽器上，這些都沒有任何問題。 但 opera下會(huì)混淆優(yōu)先順序。它認(rèn)為 padding-left 比padding 和 all ?更加具體，而不是簡(jiǎn)單地使用最后一個(gè)屬性。

大的問題是WebKit。如果一個(gè)屬性被多次指定，它將進(jìn)行多次過渡。 如果想讓W(xué)ebKit崩潰，嘗試用transition-duration ：0.1秒運(yùn)行transition-property: padding, padding-left，WebKit將至少執(zhí)行兩次過渡。但更有意思的是，TransitionEnd可以進(jìn)行上百次的單一過渡。

5 auto的轉(zhuǎn)變

CSS 屬性中的 auto 值能夠自適應(yīng)寬度，如果塊級(jí)元素設(shè)置了width: auto，那么就會(huì)繼承父級(jí)的寬度。有時(shí)你需要從 width: auto 改變到一個(gè)具體寬度，并且需要過渡那個(gè)改變。當(dāng)然本規(guī)范并沒有強(qiáng)制或否定 auto 值可用于過渡。

Firefox，IE 和 Opera 無法從 or 值過渡到 auto 值。 IE 下有 z-index 有一點(diǎn)點(diǎn)例外，但僅此而已。 另一方面，WebKit 能夠從and 過渡到幾乎可以接受 auto 值的任意CSS 屬性。WebKit 不太喜歡 clip；因?yàn)檫@個(gè)屬性，它只會(huì)引發(fā) TransitionEnd 過渡，而過渡期間不會(huì)產(chǎn)生或顯示任何中間值或狀態(tài)。

對(duì)于其他屬性，如 width 和 height，WebKit 下會(huì)有一些差異。如果 width: auto 過渡為 300px 的寬度，然后再過渡成 100px，那么過渡不會(huì)從 300 縮至100 像素。它會(huì)從 0 增加到 100 像素。

關(guān)于完整的兼容性列表，可以查看“CSS Animatable Properties.”，

6 隱式過渡

隱式過渡發(fā)生在當(dāng)一個(gè)屬性的改變引起另一個(gè)屬性被過渡的時(shí)候, 或者當(dāng)你想改變一個(gè)父級(jí)元素中的屬性, 會(huì)導(dǎo)致子元素不論是繼承過渡或附屬屬性的過渡。font-size: 18px, padding: 2em—–padding 會(huì)被計(jì)算為 2 × font-size， em 就是36像素。

有各種各樣的相對(duì)值類型：, , em, rem, vh, vw等等。使用一個(gè)相對(duì)值，如 padding: 2em，讓瀏覽器重新計(jì)算屬性的 getComputedValue()，每次應(yīng)變量（如font-size）都會(huì)發(fā)生改變。由于計(jì)算樣式改變,將反過來導(dǎo)致 padding 的過渡。這種過渡被定義為“隱式過渡”，因?yàn)閜adding屬性值沒有被修改。

大多數(shù)瀏覽器會(huì)實(shí)現(xiàn)這種隱式過渡。除了 IE 10，只對(duì) line-height 屬性執(zhí)行隱式過渡。除了 vertical-align 外，Webkit 可以針對(duì)其他所有屬性執(zhí)行隱式過渡。除了字體相對(duì)屬性值，還有寬度相對(duì)屬性值（通常為），相對(duì)屬性值（如vh和vw），默認(rèn)初始值（Opera中的column-gap: 1em），還有“currentColor”。所有這些都有可能會(huì)，也可能不會(huì)引起隱式過渡。

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

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

7 轉(zhuǎn)換和偽元素

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

Firefox 和 IE 10 可以在偽元素上實(shí)現(xiàn)屬性過渡. 而 Opera，Chrome 和 Safari 則不會(huì)。 WebKit 從2013年一月起也開始支持。

偽元素的過渡會(huì)導(dǎo)致內(nèi)容自身產(chǎn)生一些新問題，因?yàn)樵谏蓛?nèi)容時(shí) TransitionEnd 過渡根本還沒有結(jié)束。 在某一時(shí)間段內(nèi)，他們理應(yīng)在主元素上被觸發(fā)，并通過 TransitionEnd.pseudoElement 提供偽元素，但即便是“CSS動(dòng)畫過渡”的“過渡事件”部分，編寫者的方案也并沒有指定哪一個(gè)最合適。

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

如果主元素沒有運(yùn)行:hover狀態(tài)，那么 IE 10 將不針對(duì)偽元素“:hover”執(zhí)行過渡。

12

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

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

這個(gè)問題在于不是一定要求你定義主元素:hover 狀態(tài)。而是如果沒有定義，IE 10 會(huì)將:hover解釋為:active。更奇怪的是，:active狀態(tài)甚至?xí)?mouseup 后繼續(xù)持續(xù)，而當(dāng)你再次點(diǎn)擊就會(huì)取消。

8 背景標(biāo)簽

在編輯標(biāo)簽時(shí)，IE 10 是唯一可對(duì)背景或前景響應(yīng)的瀏覽器，如果標(biāo)簽變?yōu)楸尘昂螅m然它會(huì)完成正在執(zhí)行的過渡，但它不會(huì)執(zhí)行新的過渡。IE 10 將等到標(biāo)簽變?yōu)榍熬昂笤賵?zhí)行新過渡。幸運(yùn)的是，IE 10 已經(jīng)支持頁(yè)面的可見性 API，允許開發(fā)人員應(yīng)對(duì)這種操作行為。

9?隱藏元素

對(duì)于隱藏的元素,過渡是不會(huì)被執(zhí)行的，因?yàn)榇蠖鄶?shù)瀏覽器都明確認(rèn)為沒有必要在一個(gè)看不見的元素里運(yùn)行過渡。然而，也有特例，在 Opera 下無論元素隱藏與否它都將執(zhí)行過渡。

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

當(dāng)文檔脫離解析模式時(shí)，DOMContentLoaded 被觸發(fā)，如果你在使用 jquery，那么應(yīng)該了解?jQuery.ready()，過渡可以在這之前運(yùn)行。

11?渲染差異

這個(gè)問題我之前已經(jīng)說過了, 本文就是基于我的測(cè)試結(jié)果進(jìn)行闡述的。測(cè)試是自動(dòng)運(yùn)行的，但事實(shí)證明，還是發(fā)現(xiàn)了很多問題。

當(dāng)時(shí)要實(shí)現(xiàn)從漸變到漸變的背景過渡是不可能的，但可以實(shí)現(xiàn)從漸變到純色的過渡。如果漸變正在進(jìn)行中，從白色到目標(biāo)顏色的過渡即將開始，在過渡啟動(dòng)時(shí),會(huì)看到白色在快速閃動(dòng)。目前所有的瀏覽器中都可以察覺到這一點(diǎn)。

不過Firefox 似乎是用不同的算法來渲染圖像的，以表明它們執(zhí)行了動(dòng)畫過渡（見實(shí)例）。很顯然，在動(dòng)畫過渡時(shí)， Gecko 并沒有呈現(xiàn)好的效果。如果 transform: scale() 足夠低，這種情況將發(fā)生。

Firefox 不會(huì)從 a:visited 到 a:hover 過程中過渡動(dòng)畫，反之亦然。 但它會(huì)從 a:visited 直接跳到 a:link，然后過渡到 a:hover 狀態(tài)， 你可以在這個(gè)例子中看到，這是在 Mozilla Developer Network”Privacy and the :visited Selector”中提到的。然而 IE 10 與 Chrome，Safari 和 Opera 瀏覽器一樣，會(huì)從a:link到a:visited實(shí)現(xiàn)過渡。

如果子元素的 position 改變時(shí)， Firefox 不會(huì)觸發(fā)元素的屬性, 而 WebKit，Opera 和 IE 10 則會(huì)觸發(fā)。

12?對(duì)規(guī)范的建議

看完了整個(gè)規(guī)范并對(duì)所有功能進(jìn)行了測(cè)試之后，覺得如果能進(jìn)行以下優(yōu)化將會(huì)更好:

• 加入TransitionsEnd（注意是復(fù)數(shù)），一個(gè)元素的所有過渡一旦完成就啟動(dòng)觸發(fā)。它能告知一系列已被觸發(fā)的屬性，但是不需要知道哪些已被過渡， 只要知道所有的動(dòng)畫過渡何時(shí)可以完成即可。
• 加入 TransitionStart 任務(wù)，以便可以獲取每個(gè)待過渡屬性。因?yàn)?JavaScript 的事件循環(huán)和渲染路徑不一定能互相牽制，單一的 TransitionsStart（也會(huì)重復(fù)多次）可能是更好的解決方案。我不知道為什么要 cancel 任務(wù)，所以這就叫“操作后就不再管”。
• 要明確哪些 TransitionEnd 需要被觸發(fā)，前面舉例的 WebKit 中 padding 和 padding-left 的問題會(huì)讓人很頭疼。
• 要明確說明“隱形過渡”如何處理, 前面例子中 transition-property: font-size的line-height: 1em 應(yīng)該要有明確的處理方式。
• 需要添加那些允許定義 pointer-events: none 并防止意外懸停狀態(tài)的::transitioning偽類，這里防止濫用樣式，因?yàn)樗麄冏陨頃?huì)引發(fā)新的過渡或者改變正在進(jìn)行的過渡。除了這些建議，我們還需要能在不大量使用 JavaScript 進(jìn)行輔助的情況下進(jìn)行一些常規(guī)操作。
• 有時(shí)候你需要禁用過渡。例如，為了在網(wǎng)站訪問者面前呈現(xiàn)好過渡之前，你需要調(diào)整布局并對(duì)尺寸規(guī)格進(jìn)行精確測(cè)算對(duì)位置進(jìn)行好布局。
• 有時(shí)你想立即從 DOM 中移除一個(gè)對(duì)象。你可以添加一個(gè)類，等待 TransitionEnd 完成后再進(jìn)行刪除。
• 跟刪除對(duì)象一樣，你想要添加一個(gè)新元素。你可插入這個(gè)元素，設(shè)置“隱藏”以實(shí)現(xiàn)新元素的樣式變化。
• 重新排序，隱藏和顯示元素都比較常見。針對(duì)這些進(jìn)行樣式操作就要像操作實(shí)用程序一樣，如?Isotope。

13?使用delay

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

14 總結(jié)(可參考前面談到過的實(shí)例)

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

新聞標(biāo)題：CSS3 transition規(guī)范的實(shí)際使用經(jīng)驗(yàn)
分享URL：http://www.rwnh.cn/news/166274.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、小程序開發(fā)、品牌網(wǎng)站設(shè)計(jì)、云服務(wù)器、全網(wǎng)營(yíng)銷推廣、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)