CSS 過渡-transition

存在瀏覽器兼容問題，須要增長不一樣瀏覽器前綴

• -webkit-transition
• -moz-transition
• -o-transition

可以使用的過渡效果的屬性（主要包括可運算的屬性）

• 可動畫屬性列表
• 不要在auto屬性上作動畫
• 插入元素(appendChild)或設置display:none/display:block後當即使用過渡,元素將視爲沒有開始狀態，始終處於結束狀態，解決辦法：使用window.setTimeout,延遲執行

過渡屬性

• transition-property
  可過渡的屬性，例：width,height,opacity,transform

• transition-duration
  持續時間，例：1s,2s; 若property屬性值列表多於duration則duration將重複至長度一致，如1s,2s,1s,2s; 若property屬性值列表少於duration則被截斷

• transition-delay (延遲時間)

• transition-timing-function (緩動函數，例：ease,ease-in,ease-out,ease-in-out)

• transition (能夠設置綜合設置)

  -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;

  transition:width 2s, height 2s, background-color 2s, transform 2s;

檢測過渡是否完成

• 標準瀏覽器事件：transitionend;
• webkit事件：webkitTransitionEnd

監聽事件：element.addEventListener("transitionend",function,true);