CSS transitions深入理解

世有因果知因求果發表於2016-12-05
CSS

到底css transition是什麼，我們來看w3c的解釋：

CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

翻譯為中文就是：css transition允許css屬性值的變化在一個時間段內平滑完成，變化的快慢可以有對應的函式來指定。這個平滑展現css值的變化過程可以由很多事件來觸發，比如滑鼠點選，focus,hover等。

a.foo {
  padding: 5px 10px;
  background: #9c3;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease;
  }
a.foo:hover {
  background: #690;
  }

從上面的程式碼中，我們可以看到和transition相關的幾個屬性：

transition-property: 指定對哪個屬性值的變更來執行對應transition動畫過程；

transition-duration: 這個transition動畫從開始到完成的時間段落

transition-timing-function:指定transition經由時間軸變更的節奏快慢（ease, linear, ease-in, ease-out,ease-in-out, cubic-bezier）

所有可以被transtion的css屬性列表：

background-color as color
background-position as repeatable list of simple list of length, percentage, or calc
border-bottom-color as color
border-bottom-width as length
border-left-color as color
border-left-width as length
border-right-color as color
border-right-width as length
border-spacing as simple list of length
border-top-color as color
border-top-width as length
bottom as length, percentage, or calc
clip as rectangle
color as color
font-size as length
font-weight as font weight
height as length, percentage, or calc
left as length, percentage, or calc
letter-spacing as length
line-height as either number or length
margin-bottom as length
margin-left as length
margin-right as length
margin-top as length
max-height as length, percentage, or calc
max-width as length, percentage, or calc
min-height as length, percentage, or calc
min-width as length, percentage, or calc
opacity as number
outline-color as color
outline-width as length
padding-bottom as length
padding-left as length
padding-right as length
padding-top as length
right as length, percentage, or calc
text-indent as length, percentage, or calc
text-shadow as shadow list
top as length, percentage, or calc
vertical-align as length
visibility as visibility
width as length, percentage, or calc
word-spacing as length
z-index as integer

通過程式動態新增class來觸發transition

在上面的例子中，我們都是通過在元素class中設定transition屬性，在sudo class中設定變更的屬性值來實現的。有的時候，我們不光需要sudo class能夠實現transition的觸發，有什麼辦法嗎？

這時我們可以通過javascript來動態地增加或者刪除class來實現transition的觸發：

/* 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');
};

看上面的程式碼，我們將獲得兩種不同的transitions, 元素當activated的時候slide up，而當deactivated時fade out.所有javascript乾的活兒就是切換了兩個class: active和inactive

hardware acceleration

transition一些屬性，比如left, margin會使得瀏覽器在每一個frame時都重新計算styles，這是非常昂貴的計算，會導致不必要的re-paints,特別是如果在螢幕上有非常多的元素時更是如此。一個可行的方案是使用GPU。

transform: translate3d(0,0,0);

 

相關文章