關於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,當元素開啟硬體加速的時候,不支持子像素抗鋸齒。你可以看到在兩個渲染模式下的一個清晰的差別。