在 Web開發的圈子里，開發者常常認為CSS動畫是一種高性能web動畫技術，如果想讓網頁加載的更快一些，就應該用純CSS動畫。其實這種觀點是錯誤的， 很多開發者早就放棄了javascript的動畫，迫使自己使用復雜的CSS樣式來實現相同效果的UI交互。他們完全忽視了javascript帶來的更 好的交互性。

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

所以，讓我們一起粉碎那個謠言，寫一些真實的例子，來評估一下javascript動畫的性能。

為什么要使用JavaScript?

把屬性轉換到樣式中的時候用CSS非常方便，而且在不使用其它庫的情況下，它們也能提供出色的表現。但是當你使用CSS來實現復雜的設計時，它們變的非常麻煩。

總而言之，CSS一定會限制你的設計。但是如果你使用javascript，就可以從邏輯上解決這些問題。javascript的動畫引擎提供如下功能：

• 跨瀏覽器的 SVG 支持
• 基于物理學的動畫加載
• 時間軸控制,
• Bezier translations

提示：如果你對javascript的展示效果比較感興趣，可以讀一下Julian Shapiro的 “CSS vs. JS Animation: Which Is Faster?”和Jack Doyle的 “Myth Busting: CSS Animations vs. JavaScript.” 。如果想看一些演示，可以看看 performance pane 和 “Library Speed Comparison” 。

Velocity 和 GSAP

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

如果你在頁面中必須使用jQuery，你可以用Velocity和GSAP來代替你的jQuery $.animate()。比如

$element.animate({ opacity:0.5});

 可以寫成：

$element.velocity({ opacity:0.5}).

這兩個庫也當然也可以在沒有jQuery的時候使用：

    /* Working without jQuery */
    Velocity(element,{ opacity:0.5},1000);// Velocity     
    TweenMax.to(element,1,{ opacity:0.5});// GSAP

像上面的例子一樣，即全不使用jQuery，Velocity也保留了和jQuery的$.animate()類似的語法。

GSAP和它相反，通過面向對象的設計，更方便了對靜態方法的調用。你可以對動畫進行全面的控制。

在這兩種解決方案中，你都不會用到jQuery的對象元素，但是如果是要操作原始的DOM結點呢？你可以通過

    document.getElementByID     
    document.getElementsByTagName     
    document.getElementsByClassName
    document.querySelectorAll

這些類似于jQuery’s  selector的實現。下面我們會對這些方法進行簡單的介紹。

杜絕jQuery

提示：如果你需要了解jQuery的$.animate()，可以看看 Velocity’s documentation.。

讓我們看看querySelectorAll的功能：:

    document.querySelectorAll("body");// Get the body element
    document.querySelectorAll(".squares");// Get all elements with the "square" class
    document.querySelectorAll("div");// Get all divs
    document.querySelectorAll("#main");// Get the element with an id of "main"
    document.querySelectorAll("#main div");// Get the divs contained by "main"

向代碼展示的一樣，你可以通過querySelectorAll簡單的進行對CSS的選擇。它會在數組中返回所有匹配的元素：

    /* Get all div elements. */
    var divs = document.querySelectorAll("div");
     
    /* Animate all divs at once. */
    Velocity(divs,{ opacity:0.5},1000);// Velocity
    TweenMax.to(divs,1,{ opacity:0.5});// GSAP

 因為我們沒有使用jQuery的對象元素，你可能會好奇我們應該怎么把動畫鏈接起來，其實我們可以這樣做：

    $element // jQuery element object
    .velocity({ opacity:0.5},1000)
    .velocity({ opacity:1},1000);

在 Velocity中，你可以像這樣簡化你的代碼：

    /* These animations automatically chain onto one another. */
    Velocity(element,{ opacity:0.5},1000);
    Velocity(element,{ opacity:1},1000);

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

極客標簽 - 專業和精準的分享，關注你感興趣的極客，社區提供超棒的精品教程，互動授課

了解前端技術，請訪問極客互動課程庫和代碼錄播

原文來自：放棄使用jQuery實現動畫