關(guān)于具體解決方法或如何規(guī)避問(wèn)題的意見(jiàn)可以參考另一篇非常有見(jiàn)地的文章,“all you need to know about css transitions”。alex maccaw講述的是關(guān)于實(shí)現(xiàn)特定的效果,而我要談的是技術(shù)背景,主要討論在使用css過(guò)渡的過(guò)程中所未預(yù)料到的問(wèn)題。
結(jié)構(gòu) (html),表現(xiàn)(css),以及行為(javascript)相分離并不是什么新鮮的事情,然而 css 能跨越這個(gè)界限并且可以在短期內(nèi)得到實(shí)際的應(yīng)用,這還真的是一個(gè)完全不同的討論話題。
幾周前,我開發(fā)一個(gè) javascript 模塊,在能夠使用 css 過(guò)渡的條件下,javascript 端又無(wú)法獲取到實(shí)現(xiàn)過(guò)渡的方式。實(shí)際遇到的問(wèn)題是這兩者根本沒(méi)有辦法同步,經(jīng)過(guò)多次的測(cè)試后,我只能放棄。而我的測(cè)試結(jié)果正是本文所講述的。
首先,我們要說(shuō)一下getcomputedstyle(),是一種用 javascript 返回瀏覽器渲染css的屬性值的方法。 這個(gè)方法可以查看“dom level 2: getcomputedstyle()”和“css level 2: computed values”。
這對(duì)于像 font-size 這樣的屬性, 通過(guò)一個(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。
事不宜遲,讓我們來(lái)一起看一下規(guī)范與實(shí)際情況的差異,為了方便,我省略了各瀏覽器的前綴。在文中我通過(guò)創(chuàng)建一個(gè) css3 transitions test suite 來(lái)發(fā)現(xiàn)問(wèn)題。
1、指定過(guò)渡
css3 transitions 規(guī)范定義了以下四個(gè) css 屬性:
transition-property
transition-duration
transition-delay
transition-timing-function
過(guò)渡屬性
transition-property 是用來(lái)指定當(dāng)元素其中一個(gè)屬性改變時(shí)執(zhí)行 transition 效果。系統(tǒng)默認(rèn)值是 all,這意味著瀏覽器能夠以動(dòng)畫形式呈現(xiàn)所有的可過(guò)渡屬性(transition-duration持續(xù)時(shí)間超過(guò)0s),該屬性支持單個(gè)值或以逗號(hào)隔開的多個(gè)值列表(跟其他所有transition-*屬性一樣)。
規(guī)范規(guī)定,一個(gè)瀏覽器應(yīng)該接受并保存任何它不能識(shí)別的屬性。因此,下面的例子中將會(huì)看到持續(xù)2秒的 padding 過(guò)渡:
1
2
transition-property:foobar,padding;
transition-duration:1s,2s;
不同于規(guī)范的是,上面的情況在 webkit 下會(huì)解析為 transition-property: all。 而 firefox 和 opera 會(huì)解析為 transition-property: all, padding.
過(guò)渡持續(xù)時(shí)間
transition-duration 屬性規(guī)定了一個(gè)過(guò)渡從初始狀態(tài)到目標(biāo)狀態(tài)的持續(xù)時(shí)間。它接受以秒或毫秒的值(例如,2.3s和2300ms都是指2.3秒)。
盡管規(guī)范明確規(guī)定了過(guò)渡值必須為正數(shù),但 opera 仍接受-5s的值,至少對(duì)于getcomputedstyle()來(lái)說(shuō)是這樣的。雖然規(guī)范中并沒(méi)有限制屬性值的大小,但 opera 和 ie 不接受低于10ms的值。而 webkit 在 getcomputedstyle()執(zhí)行中有個(gè)小bug,例如:返回值0.009999999776482582s會(huì)取代0.01s。
過(guò)渡延遲時(shí)間
transition-delay 屬性規(guī)定了在執(zhí)行一個(gè)過(guò)渡之前的等待時(shí)間,同樣使用值。delay 可以是負(fù)值,但這會(huì)導(dǎo)致動(dòng)畫無(wú)法平滑過(guò)渡。
ie 和 opera 不接受 transition-duration 在-10ms和10ms之間的值。webkit 的 floating point 也會(huì)在這兒出現(xiàn)。
transition-timing-function 屬性規(guī)定了過(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ì)平滑過(guò)渡,但是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 值可以超過(guò)該范圍,而webkit 允許 x 超過(guò)此范圍,而 android 瀏覽器(4.0版本)卻混淆了x和y的范圍。
2 過(guò)渡完成
我前面已經(jīng)提到了 css 過(guò)渡異步運(yùn)行的問(wèn)題。規(guī)范提及了 transitionend 事件允許 javascript 與已完成的過(guò)渡同步進(jìn)行。但可惡的是該規(guī)范對(duì)此并沒(méi)具體闡述。事實(shí)上,它只是簡(jiǎn)單地說(shuō)明單個(gè)事件會(huì)因?yàn)橐淹瓿蛇^(guò)渡的屬性而被終止。
規(guī)范指出縮寫屬性(如padding)應(yīng)為包括其在內(nèi)的所有屬性(padding-top,padding-right,等等)實(shí)現(xiàn)過(guò)渡,它并沒(méi)有說(shuō)哪個(gè)屬性應(yīng)該在 transitionend 事件中被具體命名。然而即使過(guò)渡被定義為縮寫屬性(如padding),gecko,trident 和 presto 對(duì)于普通書寫的子屬性(如padding-top)同樣可以實(shí)現(xiàn)過(guò)渡,而 webkit 則會(huì)阻止過(guò)渡。 如果你指定 transition-property: padding,webkit 會(huì)為 padding 執(zhí)行過(guò)渡, 但 transition-property: all 這樣就會(huì)針對(duì) padding-left 執(zhí)行新的過(guò)渡。而當(dāng) padding 正執(zhí)行過(guò)渡時(shí), iphone 6.0.1 的 safari 瀏覽器在也可以執(zhí)行 font-size 和 line-height的過(guò)渡。
1
2
.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
1
2
.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 來(lái)“快速實(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)問(wè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。
所以,即使你知道過(guò)渡正在執(zhí)行,你也不能依賴已有的 transitionend.propertyname。盡管你可以編寫大量的 javascript 來(lái)彌補(bǔ),但在沒(méi)有對(duì)每一個(gè)屬性進(jìn)行恰當(dāng)性能檢測(cè)的情況下,即使你采用最新方法也將無(wú)法實(shí)現(xiàn)。
3 過(guò)渡屬性
規(guī)范列出了瀏覽器支持動(dòng)畫過(guò)渡的一些css屬性。當(dāng)然也包括css2.1的屬性。還有一些可以動(dòng)態(tài)變化的新屬性,如 flexible box layout。
該屬性數(shù)值類型非常重要。margin-top 接受和值,但根據(jù)可過(guò)渡css屬性列表,只有是可實(shí)現(xiàn)動(dòng)畫效果。但這并不能讓瀏覽器開發(fā)商避開值實(shí)現(xiàn)過(guò)渡。然而,word-spacing 屬性除外。該屬性包括值,但沒(méi)有瀏覽器能以動(dòng)畫形式顯示。
撇開 transitionend 事件,如果在過(guò)渡發(fā)生的指定時(shí)間內(nèi),getcomputedstyle()值從a變到b,該屬性就會(huì)從值a過(guò)渡為值b。如果沒(méi)有執(zhí)行,例如“css屬性值發(fā)生變化”,那么也許應(yīng)該仔細(xì)核查下dom。settimeout()的解析度還不夠好以達(dá)到快速過(guò)渡(小于幾百毫秒的持續(xù)時(shí)間),這時(shí)候requestanimationframe()就是你的幫手。在重繪前會(huì)提醒你,并提供了一些中間值供參考。除了opera,其他的都可以支持。
4 過(guò)渡屬性的優(yōu)先級(jí)
transition-property 規(guī)范允許多次過(guò)渡單個(gè)屬性,如果單個(gè)屬性在“過(guò)渡屬性”中的值被多次指定,過(guò)渡將通過(guò)持續(xù)時(shí)間,延遲和時(shí)間曲線給出的值來(lái)實(shí)現(xiàn)。因此,我們可以實(shí)現(xiàn) padding 過(guò)渡持續(xù)1秒,padding-left 過(guò)渡持續(xù)2秒; 或使用 transition-property: all 來(lái)定義默認(rèn)屬性類型并重置特定屬性。
在 firefox 和 ie 瀏覽器上,這些都沒(méi)有任何問(wèn)題。 但 opera下會(huì)混淆優(yōu)先順序。它認(rèn)為 padding-left 比padding 和 all 更加具體,而不是簡(jiǎn)單地使用最后一個(gè)屬性。
最大的問(wèn)題是webkit。如果一個(gè)屬性被多次指定,它將進(jìn)行多次過(guò)渡。 如果想讓webkit崩潰,嘗試用transition-duration :0.1秒運(yùn)行transition-property: padding, padding-left,webkit將至少執(zhí)行兩次過(guò)渡。但更有意思的是,transitionend可以進(jìn)行上百次的單一過(guò)渡。
5 auto的轉(zhuǎn)變
css 屬性中的 auto 值能夠自適應(yīng)寬度,如果塊級(jí)元素設(shè)置了width: auto,那么就會(huì)繼承父級(jí)的寬度。有時(shí)你需要從 width: auto 改變到一個(gè)具體寬度,并且需要過(guò)渡那個(gè)改變。當(dāng)然本規(guī)范并沒(méi)有強(qiáng)制或否定 auto 值可用于過(guò)渡。
firefox,ie 和 opera 無(wú)法從 or 值過(guò)渡到 auto 值。 ie 下有 z-index 有一點(diǎn)點(diǎn)例外,但僅此而已。 另一方面,webkit 能夠從and 過(guò)渡到幾乎可以接受 auto 值的任意css 屬性。webkit 不太喜歡 clip;因?yàn)檫@個(gè)屬性,它只會(huì)引發(fā) transitionend 過(guò)渡,而過(guò)渡期間不會(huì)產(chǎn)生或顯示任何中間值或狀態(tài)。
對(duì)于其他屬性,如 width 和 height,webkit 下會(huì)有一些差異。如果 width: auto 過(guò)渡為 300px 的寬度,然后再過(guò)渡成 100px,那么過(guò)渡不會(huì)從 300 縮至100 像素。它會(huì)從 0 增加到 100 像素。
關(guān)于完整的兼容性列表,可以查看“css animatable properties.”
6 隱式過(guò)渡
隱式過(guò)渡發(fā)生在當(dāng)一個(gè)屬性的改變引起另一個(gè)屬性被過(guò)渡的時(shí)候, 或者當(dāng)你想改變一個(gè)父級(jí)元素中的屬性, 會(huì)導(dǎo)致子元素不論是繼承過(guò)渡或附屬屬性的過(guò)渡。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ì)算樣式改變,將反過(guò)來(lái)導(dǎo)致 padding 的過(guò)渡。這種過(guò)渡被定義為“隱式過(guò)渡”,因?yàn)閜adding屬性值沒(méi)有被修改。
大多數(shù)瀏覽器會(huì)實(shí)現(xiàn)這種隱式過(guò)渡。除了 ie 10,只對(duì) line-height 屬性執(zhí)行隱式過(guò)渡。除了 vertical-align 外,webkit 可以針對(duì)其他所有屬性執(zhí)行隱式過(guò)渡。除了字體相對(duì)屬性值,還有寬度相對(duì)屬性值(通常為),相對(duì)屬性值(如vh和vw),默認(rèn)初始值(opera中的column-gap: 1em),還有“currentcolor”。所有這些都有可能會(huì),也可能不會(huì)引起隱式過(guò)渡。
在 firefox 中, 當(dāng)繼承和附屬屬性執(zhí)行過(guò)渡,但他們的 transition-duration 或 transition-delay 并沒(méi)有隨著過(guò)渡, 這些隱式過(guò)渡就會(huì)變得特別有趣。 而 webkit 和 opera 執(zhí)行過(guò)渡時(shí)會(huì)很有視覺(jué)感,但 firefox 會(huì)稍顯錯(cuò)亂。在ie中不會(huì)輕易執(zhí)行隱式過(guò)渡。
另外,別忘了繼承, dom 元素的 font-size 將會(huì)由其子元素繼承,只要不被覆蓋,就可能引起隱式過(guò)渡。
7 轉(zhuǎn)換和偽元素
偽元素(:before和:after),在 css2 中已經(jīng)有了介紹. 如果不熟悉可以查看 “l(fā)earning to use the :before and :after pseudo-elements in css”。 雖然 css3 中定義了額外的偽元素(::alternate,::outside),但是他們(到目前為止)還并沒(méi)有被支持。因此所有 css 動(dòng)畫屬性也應(yīng)該是偽元素的動(dòng)畫屬性。
firefox 和 ie 10 可以在偽元素上實(shí)現(xiàn)屬性過(guò)渡. 而 opera,chrome 和 safari 則不會(huì)。 webkit 從2013年一月起也開始支持。
偽元素的過(guò)渡會(huì)導(dǎo)致內(nèi)容自身產(chǎn)生一些新問(wèn)題,因?yàn)樵谏蓛?nèi)容時(shí) transitionend 過(guò)渡根本還沒(méi)有結(jié)束。 在某一時(shí)間段內(nèi),他們理應(yīng)在主元素上被觸發(fā),并通過(guò) transitionend.pseudoelement 提供偽元素,但即便是“css動(dòng)畫過(guò)渡”的“過(guò)渡事件”部分,編寫者的方案也并沒(méi)有指定哪一個(gè)最合適。
我們想要改變 content 屬性值,因此ie 8將在特殊情況下(比如:hover狀態(tài))將會(huì)重新渲染該元素。結(jié)果表明,對(duì)老的ie版本進(jìn)行兼容會(huì)影響到所有其他瀏覽器的效率。所以, 當(dāng)試圖在偽元素上進(jìn)行屬性過(guò)渡時(shí),要確保 content 的值不會(huì)被改變。
如果主元素沒(méi)有運(yùn)行:hover狀態(tài),那么 ie 10 將不針對(duì)偽元素“:hover”執(zhí)行過(guò)渡。
1
2
.some-selector:before{content:hello;color:red;transition:all 1s linear 0s;}
.some-selector:hover:before{color:green;}
在 ie10 下,:before在 mouseover 的時(shí)候,:hover 是一定要定義的。
這個(gè)問(wèn)題在于不是一定要求你定義主元素:hover 狀態(tài)。而是如果沒(mé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)楸尘昂?,雖然它會(huì)完成正在執(zhí)行的過(guò)渡,但它不會(huì)執(zhí)行新的過(guò)渡。ie 10 將等到標(biāo)簽變?yōu)榍熬昂笤賵?zhí)行新過(guò)渡。幸運(yùn)的是,ie 10 已經(jīng)支持頁(yè)面的可見(jiàn)性 api,允許開發(fā)人員應(yīng)對(duì)這種操作行為。
9 隱藏元素
對(duì)于隱藏的元素,過(guò)渡是不會(huì)被執(zhí)行的,因?yàn)榇蠖鄶?shù)瀏覽器都明確認(rèn)為沒(méi)有必要在一個(gè)看不見(jiàn)的元素里運(yùn)行過(guò)渡。然而,也有特例,在 opera 下無(wú)論元素隱藏與否它都將執(zhí)行過(guò)渡。
10 過(guò)渡之前,dom樹是否加載完畢
當(dāng)文檔脫離解析模式時(shí),domcontentloaded 被觸發(fā),如果你在使用 jquery,那么應(yīng)該了解 jquery.ready(),過(guò)渡可以在這之前運(yùn)行。
11 渲染差異
這個(gè)問(wèn)題我之前已經(jīng)說(shuō)過(guò)了, 本文就是基于我的測(cè)試結(jié)果進(jìn)行闡述的。測(cè)試是自動(dòng)運(yùn)行的,但事實(shí)證明,還是發(fā)現(xiàn)了很多問(wèn)題。
當(dāng)時(shí)要實(shí)現(xiàn)從漸變到漸變的背景過(guò)渡是不可能的,但可以實(shí)現(xiàn)從漸變到純色的過(guò)渡。如果漸變正在進(jìn)行中,從白色到目標(biāo)顏色的過(guò)渡即將開始,在過(guò)渡啟動(dòng)時(shí),會(huì)看到白色在快速閃動(dòng)。目前所有的瀏覽器中都可以察覺(jué)到這一點(diǎn)。
不過(guò)firefox 似乎是用不同的算法來(lái)渲染圖像的,以表明它們執(zhí)行了動(dòng)畫過(guò)渡(見(jiàn)實(shí)例)。很顯然,在動(dòng)畫過(guò)渡時(shí), gecko 并沒(méi)有呈現(xiàn)好的效果。如果 transform: scale() 足夠低,這種情況將發(fā)生。
firefox 不會(huì)從 a:visited 到 a:hover 過(guò)程中過(guò)渡動(dòng)畫,反之亦然。 但它會(huì)從 a:visited 直接跳到 a:link,然后過(guò)渡到 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)過(guò)渡。
如果子元素的 position 改變時(shí), firefox 不會(huì)觸發(fā)元素的屬性, 而 webkit,opera 和 ie 10 則會(huì)觸發(fā)。
12 對(duì)規(guī)范的建議
看完了整個(gè)規(guī)范并對(duì)所有功能進(jìn)行了測(cè)試之后,覺(jué)得如果能進(jìn)行以下優(yōu)化將會(huì)更好:
加入transitionsend(注意是復(fù)數(shù)),一個(gè)元素的所有過(guò)渡一旦完成就啟動(dòng)觸發(fā)。它能告知一系列已被觸發(fā)的屬性,但是不需要知道哪些已被過(guò)渡, 只要知道所有的動(dòng)畫過(guò)渡何時(shí)可以完成即可。
加入 transitionstart 任務(wù),以便可以獲取每個(gè)待過(guò)渡屬性。因?yàn)?javascript 的事件循環(huán)和渲染路徑不一定能互相牽制,單一的 transitionsstart(也會(huì)重復(fù)多次)可能是更好的解決方案。我不知道為什么要 cancel 任務(wù),所以這就叫“操作后就不再管”。
要明確哪些 transitionend 需要被觸發(fā),前面舉例的 webkit 中 padding 和 padding-left 的問(wèn)題會(huì)讓人很頭疼。
要明確說(shuō)明“隱形過(guò)渡”如何處理, 前面例子中 transition-property: font-size的line-height: 1em 應(yīng)該要有明確的處理方式。
需要添加那些允許定義 pointer-events: none 并防止意外懸停狀態(tài)的::transitioning偽類,這里防止濫用樣式,因?yàn)樗麄冏陨頃?huì)引發(fā)新的過(guò)渡或者改變正在進(jìn)行的過(guò)渡。除了這些建議,我們還需要能在不大量使用 javascript 進(jìn)行輔助的情況下進(jìn)行一些常規(guī)操作。
有時(shí)候你需要禁用過(guò)渡。例如,為了在網(wǎng)站訪問(wèn)者面前呈現(xiàn)完美過(guò)渡之前,你需要調(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)新元素的樣式變化。
重新排序,隱藏和顯示元素都比較常見(jiàn)。針對(duì)這些進(jìn)行樣式操作就要像操作實(shí)用程序一樣,如 isotope。
13 使用delay
使用延時(shí),可以很好的解決無(wú)意的鼠標(biāo)懸停造成的樣式變化,如同settimeout()。
14 總結(jié)(可參考前面談到過(guò)的實(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í)上存在問(wèn)題,例如:要避免transition-property: margin, margin-left的情況。
ie不支持隱式轉(zhuǎn)換。
firefox和opera無(wú)法解析 transition-property: all, width。
opera 混淆了屬性的優(yōu)先級(jí)。
偽元素的過(guò)渡不會(huì)影響 transitionend。
偽元素的過(guò)渡在 ie 10 下會(huì)出現(xiàn):hover的bug。
更多信息請(qǐng)查看IT技術(shù)專欄