關於CSS Transition,你需要知道的事


css3的過渡屬性,給web應用帶來了簡單優雅的動畫,但是比起初次相見,他(transition)有許多細則。在這片文章中,我將會專研css3的過渡(transition)中更加復雜的部分,從鏈式和事件到硬件加速和動畫函數。讓瀏覽器控制動畫序列,通過改變幀率,減少繪畫和減少GPU的工作,能夠優化性能和效率。

 

應用 transition

一個最簡單使用transition的方法就是和CSS偽元素一起用,比如:hover。注意我們在指定屬性名字,transition的時長,以及默計時函數,linear。

.element { height: 100px; transition: height 2s linear; } .element:hover { height: 200px; } 

當:hover偽元素被激活的時候,這高度會動態地在兩秒內從100px過度到200px。

duration是唯一在transition縮寫中需要的項目。瀏覽器默認的定時方法是ease,以及一個all的屬性,除非他們已經提供了。

當談論到激活transition,我們不希望被限制於使用偽元素 —— 很顯然這不靈活。解決這個的方法就是用程序添加和刪除class

/* CSS */ .element { opacity: 0.0; transform: scale(0.95) translate3d(0,100%,0); transition: transform 400ms ease, opacity 400ms ease; } .element.active { opacity: 1.0; transform: scale(1.0) translate3d(0,0,0); } .element.inactive { opacity: 0.0; transform: scale(1) translate3d(0,0,0); } // js with jQuery var active = function(){ $('.element').removeClass('inactive').addClass('active'); }; var inactive = function(){ $('.element').removeClass('active').addClass('inactive'); }; 

以上的列子,我們用了2個不同的過渡(transition),當激活的時候,元素向上滑動,當無效化之后,淡出。所有的JavaScript所做的事就是切換active 和 inactive這兩個class。

 

過渡漸變

不是所有的CSS屬性都能過渡,最基本的規則是你只能過渡絕對值。比如,你不能讓height從 0px過渡到auto,瀏覽器不能計算中間過度值,因此屬性變化是瞬間的。Oli Studholme提供了便利的 一份完全過度屬性的列表。

同時,有一些很好的解決方法。第一個方法包括添加透明度到漸變,然后過渡到背景色。比如:

.panel { background-color: #000; background-image: linear-gradient(rgba(255, 255, 0, 0.4), #FAFAFA); transition: background-color 400ms ease; } .panel:hover { background-color: #DDD; } 

如果漸變是持續的,你可以過渡background-position,就像這里寫的,否則,你的最后手段是創建兩個元素,一個放在另一個之上,然后過渡你的透明度。

.element { width: 100px; height: 100px; position: relative; background: linear-gradient(#C7D3DC,#5B798E); } .element .inner { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(#DDD, #FAFAFA); opacity: 0; transition: opacity 1s linear; } .element:hover .inner { opacity: 1; } 

后者方法的需要注意的是,這需要額外的標記,並且在內部的div能夠捕捉到指針事件。偽元素,類似:before和:after可以是過度理想的使用案例。

 

硬件加速

過渡某個屬性,比如left和margin會導致瀏覽器每幀都會重新計算樣式。這消耗相當昂貴,並且可能會導致不必要的重繪,特別是如果你在屏幕上有很多元素。這在低性能設備上顯得特別明顯,比如手機。

這個解決方案是使用CSS過渡來減少渲染給GPU帶來的壓力。簡單來說,這在過渡的時候,將元素變成了一張圖片,避免任何樣式重新計算,這極大程度上增加了性能。一個簡單強迫瀏覽器用硬件渲染一個元素的方法是,設置轉型的Z軸,這個你可以用translate3d:

transform: translate3d(0,0,0);

不過這不是根治性能的方法,並且會帶來許多本身的問題。只有當需要的時候,你才應該用硬件加速,並且完全不需要在每個元素上都使用它。

比如,硬件加速會導致微妙的字體問題,比如一個字體出現的時候失去了加粗效果。這是因為一個bug,當元素開啟硬件加速的時候,不支持子像素抗鋸齒。你可以看到在兩個渲染模式下的一個清晰的差別。

此外,不同的瀏覽器用不同的硬件加速的庫,這可能會造成跨瀏覽器問題。比如,當Chrome和Safari都是WebKit內核的,Chrome使用Skia來做圖形渲染,然而同時Safari用的CoreGraphics。這兩個庫之間的差別是細微的,但是確是存在。

你可以用Chrome的開發者工具概覽頁面,顯示所有的重繪。外加你可以在開發者工具選項中選擇顯示三角形,甚至可以通過 about:flags 打開復合渲染層邊界,來看哪個層是作用在GPU上的。關鍵是批量在DOM刷新下,減少繪畫,並且從GPU上減少最多的的壓力。

如果你在瀏覽器之間因為硬件加速而有了顯示問題,比如閃爍或者顫動,確保你沒有用transform3d()的CSS屬性在元素上。

 

剪裁

為了充分利用GPU渲染,你需要避免使用CSS樣式變換而不是像width這種重新計算樣式的屬性。若果你確實需要給元素的寬度做動畫?解決方案就是剪裁。

在以下的例子中個,你可以看到一個搜索框和2個過度狀態。第二個擴展狀態被一個剪裁的元素給隱藏了。

過渡這個擴展的寬度,我們所需要做的就是轉變X軸到左邊。這邊的關鍵是我們用translate3d而不是改變元素的寬度。

.clipped { overflow: hidden; position: relative; } .clipped .clip { right: 0px; width: 45px; height: 45px; background: url(/images/clip.png) no-repeat } input:focus { -webkit-transform: translate3d(-50px, 0, 0); } 

確保我們不會在每一幀重新計算元素的寬度,過渡會變得順滑和高性能。

 

時間函數

到目前為止,我們用了一些瀏覽器預定義時間函數linear, ease, ease-in, ease-out和ease-in-out。對於更多復雜的時間函數來說,我們要寫我們自己的時間函數,通過定義貝塞爾曲線的4個關鍵點。

transition: -webkit-transform 1cubic-bezier(.17,.67,.69,1.33);

 

規划過渡

在CSS中寫過渡非常好,但是有時候你需要更多控制,特別是談到鏈式過渡的時候。幸運的是我們不僅能從JavaScript中調用過渡,也能定義他們。

CSS過渡有一個魔法般的all屬性,這確保了任何屬性改變都是過渡的。讓我們看看如何實踐他們

var defaults = { duration: 400, easing: '' }; $.fn.transition = function (properties, options) { options = $.extend({}, defaults, options); properties['webkitTransition'] = 'all ' + options.duration + 'ms ' + options.easing; $(this).css(properties); }; 

現在我們有個jQuery函數$.fn.transition,我們可以用它來編程調用過渡。

$('.element').transition({background: 'red'});

 

過渡回調

接下來的步奏是鏈式過渡,是過渡結束后回調。你可以在Webkit中獲得這個狀態,通過監聽webkitTransitionEnd這個事件。

var callback = function () { // ... } $(this).one('webkitTransitionEnd', callback) $(this).css(properties); 

記住有時候事件沒有綁定,經常是在那些屬性不改變或者一個繪畫沒有被觸發的情況下。為了確保我們一直有一個回調,讓我們設置一個超時,這會手動幫我們觸發時間。

$.fn.emulateTransitionEnd = function(duration) { var called = false, $el = this; $(this).one('webkitTransitionEnd', function() { called = true; }); var callback = function() { if (!called) $($el).trigger('webkitTransitionEnd'); }; setTimeout(callback, duration); }; 

我們在設置元素css之前,請求 $.fn.emulateTransitionEnd(),以確保我們過渡之后會有CSS回調。

$(this).one('webkitTransitionEnd', callback); $(this).emulateTransitionEnd(options.duration + 50); $(this).css(properties); 

 

鏈式過渡

因此,現在我們能夠通過寫程引用過渡,當他們結束之后獲得回調,我們能夠開始排序過渡。我們能夠寫自己的序列來做這件事,但是我們用了jQuery,我們最好滲透庫的現存方法。

jQuery提供了2個關鍵函數和他的隊列和API聯系,$.fn.queue(callback)和 $.fn.dequeue()。前者加了一個回調到隊列中,然后后者執行下一個隊列中的項目。

換句話說,我們需要設置我們的CSS過渡在$.fn.queue回調之中,然后確保當過渡完成的時候,我們調用了$.fn.dequeue

var $el = $(this); $el.queue(function(){ $el.one('webkitTransitionEnd', function(){ $el.dequeue(); }); $el.css(properties); }); 

這個例子相對簡單,但是他讓我們創建了復雜的鏈式動畫,並且甚至使用jQuery的delay()函數:比如:

$('.element').transition({left: '20px'}) .delay(200) .transition({background: 'red'}); 

 

重新繪制

在過渡的時候,你會需要兩組CSS屬性。最初的屬性是動畫應該從哪里開始,和最后的屬性,過渡應該在哪里結束。

$('.element').css({left: '10px'}) .transition({left: '20px'}); 

然而,你會發現如果你應用了兩組屬性,一個立馬在另一個之后運行了,然后瀏覽器嘗試優化屬性改變,無視你的初始屬性和阻止過渡。在場景之后,瀏覽器繪制之前,批處理屬性變動,經常會加速渲染,經常會有不良反應。

解決方法是在兩組屬性之間強迫重繪。一個簡單的方法是獲取Dom元素的offsetHeight屬性,就像這樣

$.fn.redraw = function(){ $(this).each(function(){ var redraw = this.offsetHeight; }); }; 

這在素有的瀏覽器中有有效,但是我有次很巧合地在Android中,這依然不行。可供替代的方法有timeout或者切換class名。

$('.element').css({left: '10px'}) .redraw() .transition({left: '20px'}); 

廣州品牌設計公司https://www.houdianzi.com PPT模板下載大全https://redbox.wode007.com

未來

過渡(Transition)正在活躍地應用,以及下一個標准看上去很有前景。這個建議包括了一個新的javascript的API,這個api專注於過渡現存的限制,並給與開發者更多的靈活性。

實際上,你可以在github上找到新API的鋪墊。這包括了舉例一個Animation構造函數,傳遞到一個元素,讓它做動畫,做動畫的屬性,還有其他的屬性,諸如延遲。

var anim = new Animation(elem, { left: '100px' }, 3); anim.play(); 

有了這個新的API,你可以同步動畫,提供私人定制的時間函數,並且或者完整的回調。這真是一件激動人心的事啊!

到目前為止,你希望對CSS過渡有更深層次的了解,並且結合簡單的API能夠提供復雜豐富的效果。 大多數javascript例子都直接來自於GFX,一個jQueryCSS過渡庫。同樣在core library,我包含了一些的額外的特效,比如滑動進/出,外加進/出和3D翻轉。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM