css3 - transform, transition 與 translate

零.序言

　　css 3 的新特性，不少都停留在據說而非實際使用。transform， transition， translate 這三長得實在太像，剛開始的時候老是迷迷糊糊，分不清它們的功能。而最近新接入的項目以視覺效果爲主，故也算是被動弄清基礎含義。

 

　　先說結論，transform 與 transitions 是屬性，如同 border、width 同樣，咱們能夠手動設置其值以達到效果；translate 是 transform 的其中一個值，如同 auto 是 width 是其中的一個值同樣。

 

1、transform 轉變

　　這是一個靜態的屬性，如同 border 同樣，設置以後當即改變，改變不須要時間參與。它的做用是專一於改變元素基於默認位置的某些狀態（如平移、縮放、旋轉等），以下案例：

.container:hover {
  /* transform: scale(2,2) */
  transform: translateY(50%)
}
.other {
  background-color: #333;
}


<div class="container"></div>
<div class="other"></div>

 

　　從上例中，咱們能夠看出，transform 是突變的，而且它轉變以後並不擠壓其餘元素在文檔流中的位置。

　　至於 transform 有哪些值，咱們能夠參看 MDN 或者 w3c 。

 

2、transition 過渡

　　相對於 transform，transition 則引入了時間概念，所以這再也不是突變，而是當它所綁定的屬性（好比width）發生改變的時候，會根據速度曲線慢慢變化。

　　以下例：

.container {
  transition: height 1s; 
}
.container:hover {
  height: 700px;
}
.other {
  background-color: #333;
}

<div class="container"></div>
<div class="other"></div>

 

　　從上面咱們能夠看出， transition 綁定的是元素某一個已經存在的屬性值，這個屬性值再某種狀態下發生了變化，而 transition 專一於將這種改變添加個速度曲線，使得元素平滑轉變，不顯得很突兀。

　　從上圖中咱們也能夠看出，由於 transition 過渡中某些屬性被修改了，必然引發佈局上的變化，這個有好處也有壞處，至因而看重效果仍是看重性能，則需根據實際狀況來定。

　　（這裏有個建議，上例中，transition 是寫在 .container{} 中的，所以，在鼠標移出以後也會有個平滑地回退過程，而將 transition 寫在 .container:hover {} 中，鼠標移出後不會有平滑回退）

 

　　固然，如同其餘屬性同樣，transition 支持嵌套：

.container {
  transition: height 1s; 
}
.child {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s;
}
.container:hover .child {
  width: 300px;
}
.container:hover {
  height: 400px;
}


<div class="container">
  <div class="child"></div>  
</div>
<div class="other"></div>

 

 

　　另外，不是全部的 css 屬性都能 transition，好比 transition: display 就不會生效。只有「可被用於動畫的屬性」(MDN - 可被用於動畫的屬性) 纔可以生效。

 

3、混合使用

　　不少成熟的網站上，這二者常常混合使用，從而造成了一種動畫效果。固然，這並非真正的動畫，此外，正是由於混合使用，因此在初學的時候賊容易搞混，加上單詞又長得很像，就容易迷糊。固然了，混合使用的時候也容易出現各類各樣的坑，故必定要耐心調試...

　　下面是一個簡單的 demo:

.container {
  transition: all 1s; 
}
.container:hover {
  transform: translateY(50%);
  height: 400px;
}


<div class="container"></div>
<div class="other"></div>

　　這個例子中，設置 .container 沿 y 軸正向平移 50%，那麼，猜一猜平移了多少 px ？ o(￣▽￣)ｄ

 

4、transition 與 animation

　　animation 與 transition 一塊兒於 css3 中引入，在用法上也與 transition 上很類似，甚至不少的屬性值如動畫去線，執行時間等都同樣。那麼這兩個有什麼區別呢？

　　先從總體上，transition 其實只有兩個狀態（關鍵幀），變化前的(start)和變化後的(end)，而 animation 則能夠人爲設置多個狀態（關鍵幀），這一點上，咱們能夠作出更豐富的視覺效果；transition 須要顯式設定觸發條件，如使用 hover，動態增長/刪除 css 類來修改某些屬性， animation 則不須要顯式控制，一旦定義以後，它將自動開始執行。

　　從細節上來看，transition 的觸發方式決定了其不具備循環的特色，固然，使用 js 定時器來模擬循環也是一種思路，animation 則自帶循環設置，animation-iteration-count 這個就能夠指定循環重複次數；另外，transition 是直接在定義語句中綁定屬性值，如 transition：width 1s ，而 animation 定義語句中綁定的是動畫名字，如 animation: yourAniName 1s ...  ，再在  @keyframes 中的每一個關鍵幀中描述須要改變的屬性的值。

　　下面是一個簡單的 demo:

// transition
.container {
  height: 300px;
  transition: all 1s; 
}
.container:hover {
  transform: translateY(50%);
  height: 400px;
}


// animation
.container {
  animation: myAni 3s linear 1s infinite normal;
}
@keyframes myAni {
  0%, 100% {
    height: 300px;
  }

  20%, 80% {
    height: 400px;
    width: 550px;
  }

  50% {
    height: 500px;
    width: 600px;
  }
}

 

5、最後

　　css3 的新特性，對於 IE 來講都作不到完美兼容，若是須要照顧老項目，優先不考慮 css 3 的這些新特性。可是，對於新項目，使用這些新的特性絕對可以帶來非凡的體驗。