CSS および SVG アニメーション ライブラリ: Animate Plus_html/css_WEB-ITnose

Animate Plus は、アニメーション化された CSS プロパティと SVG プロパティの構築に役立つ高性能 JavaScript ライブラリです。Animate Plus は、デスクトップやモバイル デバイスでの高速な UI インタラクションや長いアニメーション シーケンスに最適です。例:

• DOM 要素の CSS スプリング アニメーション
• 単純な SVG モーフィング アニメーション
• パフォーマンス/ストレス テスト (250 個の SVG シェイプを個別にアニメーション化)

入門

npm install animateplusor download and insertanimate.min.js(2) 。 7KB gzip圧縮) :

<script src=animate.min.js></script>

アニメーションの開始:

animate({  el: "div",  translateX: 100,  opacity: .5,  duration: 500 });

API

引数

animate は、少なくともアニメーション化する要素とプロパティを含むオブジェクトまたは aMap を受け入れます:

animate({  el: "div",  opacity: 0 }); // Or: var params = new Map();params.set("el", "div");params.set("opacity", 0);animate(params);

el

アニメーション化する要素elcan は次のいずれかを受け取ります:

• CSS selector:"div"
• jQuery-like object:$("div")
• DOM element:document.querySelector("div")
• DOM 要素の配列:[document .querySelector("div")]
• NodeList または HTMLCollection:document.getElementsByTagName("div")

プロジェクトのホームページ: http://www.open-open.com/lib/view/home/1434012030223