css樣式可分為兩種，一種值接近無限的集合(color,width)，一種值只有幾種(display)，可以進行計算的樣式，產生了動畫效果。\
1. 動畫的第一步是獲得元素的精確樣式值。
2. 若要做平移，傳入結束位置、距離、時長、fps。
tips：fps設定多少合適？
除了人的眼睛，還要考慮到顯示器的顯示速度與瀏覽器的渲染速度。據國外統計，根據人所能感知到的變化間隔，25毫秒為最佳數值。
緩動公式**於數學上的三角函式、二次項方程、高階方程式，有了公式就可以控制移動速度。
一般情況下，只會用預設的linear或easein。現在所有的緩動公式，除了linear外都以ease開頭命名，新增三種字尾，in代表加速、out代表減速、inout代表先加速後減速，於是有easein、easeout、easeinout之分。這種命名表示沒有介入高階函式與三角函式，linear表示勻速。
transition是css入侵行為層的主要行為。
包含4個屬性，樣式名、持續時間、緩動公式、延遲多久才觸發。
transition-property
指定屬性執行transition效果，主要有以下幾個值：none（無）、all（所有屬性 預設值）、indent（元素屬性名）。
如果指定屬性，可以選擇的型別如下：
1、與顏色相關的屬性，如background-color,border-color,color,outline-color。
2、與盒子模型、字型大小、間距、行高有關樣式。如width、top、margin、line-height等。
3、透明度 opacity。
4、變形相關 即transform。
5、陰影 text-shadow box-shadow。
6、線性漸變與徑向漸變。
transition-duration
動畫持續時間，單位可以是s，也可以是ms。
transition-timing-function
緩動公式。有6個可能的值
1、ease：逐漸變慢（預設值）
2、linear：勻速
3、ease-in：加速
4、ease-out：減速
5、ease-in-out：先加速後減速
6、cubic-bezier：允許自定義乙個時間曲線。（x1,y1,x2,y2），四個值對應貝塞爾曲線的4個點，值需定義在[0,1]之間。
transition-delay
延遲執行時間，可菜單位s或ms。
該屬性缺點是不可控，無法暫停，一般框架不會用這個來實現動畫引擎。
吸收了flash的關鍵幀理念，並克服了transition的一些缺陷。
animation是乙個復合樣式，可以細分為8個更細的樣式，情況與background-*關係相仿。
1、animation-name
制約關鍵幀樣式的名字，可以同時對應多個關鍵幀樣式規則名，以『，』號分開。
2、animation-duraiton
動畫持續時間，單位為s或ms。
3、animation-timing-function
緩動公式。
4、animation-delay
動畫延遲多久才開始，不計入duration。
5、animation-iteration-count
6、animation-direction
動畫執行的方向，有四個值：normal、alternate、reverse、alternate-reverse。
normal：指每次都從第一幀開始。
alternate：count大於1有效，動畫從0%-100%,100%-0%迴圈。
reverse：有相容問題，與normal相反，從最後一幀開始。
alternate-reverse：有相容問題，與alternate相反。
7、animation-fill-mode
指動畫跑完一圈，是保持動畫前的狀態還是此時的狀態。
8、animation-play-state
用於暫停或繼續此動畫。
除了最後兩個，前六個可以寫在一塊。
JS框架設計讀書筆記之 節點模組
瀏覽器提供了多種手段建立api，從流行程度依次是document.createelement innerhtml insertadjacenthtml createcontextualfragment。document.createelement 傳入乙個標籤名，返回此型別的元素節點。對於瀏覽器不支...
JS框架設計讀書筆記之 核心模組
該模組是框架最先執行的部分，jquery與vue中都有初始化的 模組的功能主要是 物件擴充套件 陣列化 型別判定 事件繫結和解綁 無衝突處理 模組載入 domready 物件擴充套件 jquery.extend first.length i return first grep function el...
JS框架設計讀書筆記之 選擇器引擎02
以sizzle的主函式宣告為例，來說明引擎的相關概念。function sizzle selector,context,results,seed 種子集seed 如果css選擇器非常複雜，需要分幾步來得到結果，那麼第一次得到的元素集合就叫種子集。sizzle引擎的解析基本上是由右到左，種子集中的一部...