Atitti css transition Animation differ區別

標籤：sheet   mil   console   自動   att   定義   方便   script   ddc   

 

Atitti  css   transition Animation differ區別

 

1.1. transition的優點在於簡單易用，但是它有幾個很大的局限。  1

1.2. Transition是可以自動觸發的使用timeout1

1.3. js 動態改變 style 內容 ，樣式覆蓋 2

1.4. Velocity 和 GSAP2

 

 

1.1. transition的優點在於簡單易用，但是它有幾個很大的局限。 

 （2）transition是一次性的，不能重複發生，除非一再觸發。 
（3）transition只能定義開始狀態和結束狀態，不能定義中間狀態，也就是說只有兩個狀態。 
（4）一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。 
CSS Animation就是為瞭解決這些問題而提出的。

1.2.  Transition是可以自動觸發的使用timeout

 

<script>

window.setTimeout(function()

{

console.log("--add cls");

$("#u").addClass("big");

},500);

window.setTimeout(function()

{

console.log("--add cls2");

 $("#r").addClass("big2");

},1000);

 

1.3.  js 動態改變 style 內容 ，樣式覆蓋

  var style = document.getElementById("dynamic")

    style.innerHTML = ‘@-webkit-keyframes myfirst{50% {background: ‘+color+‘;} }\n‘

             + ‘@keyframes myfirst {50% {background: ‘+color+‘;}}‘

 

var tt=document.styleSheets[0];

tt.deleteRule(6);//清除之前寫入的動畫樣式console.log(tt);

tt.insertRule("@keyframes mymove{0%{} 100%{transform:rotateZ(0deg);top:10%;left:30%;width:400px}}",6);//寫入樣式

 

keyframes之所以是複數，就是因為它裡面還包含很多子樣式keyframe
keyframe相當於普通CSS樣式的rule，所以keyframe對象才有 style 屬性，可以用來進行修改

 

1.4.  Velocity 和 GSAP

 

　　兩個最常用的javascript動畫庫是 Velocity.js 和 GSAP。這些庫在使用jQuery的時候並沒有效能損耗，因為它們都沒有使用jQuery的動畫棧。

　這樣來處理動畫就不會存在效能上的浪費。你會發現它javascript的效能真的和CSS差不多，而且操作更方便。

 

　但事實是基於javascript的動畫效果通常和基於css的動畫一樣快，有些甚至更快一些。CSS動畫通常被覺得比較快，因為我們總是拿它和jQuery動畫相比，其實慢的是jQuery的$.animate()，然而javascript的動畫庫避免了DOM操作，常常比jQuery快20倍左右。

 

 

 

【CSS3】transition過渡和animation動畫 - 季詩筱的部落格 - 部落格頻道 - CSDN.NET.html

javascript - js如何動態修改@keyframes相關值？ - SegmentFault.html

css - JavaScript怎麼修改@keyframes - SegmentFault.html

放棄使用jQuery實現動畫 - A5創業網.html

 

 

作者:: 綽號:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ） 

漢字名：艾提拉（艾龍），   EMAIL:[email protected]

轉載請註明來源： http://www.cnblogs.com/attilax/

Atiend

 

 

Atitti css transition Animation differ區別