平均スタックアプリケーションにアニメーションを追加する方法

Question

MEANスタックを使用してWebアプリケーションを設計していますが、MEANスタックを使用してWebアプリケーションを開発する方法を説明するチュートリアルが多数ありますが、アプリケーションにアニメーションを追加する方法。具体的には、すべてのアニメーションをCSSに配置し、htmlテンプレートでこれらのクラスを参照する必要があります。 HTML5キャンバスを使用した先進的なアニメーション機能の追加については、プロジェクトのどの部分が座っていますか？MEANアプリケーションにアニメーションを追加する最も一般的でクリーンな方法は、Angular in Animateです。

EDIT：具体的に実装しようとしているのは、箱の贈り物をプレゼントで包んだイメージで、左側にリボンが掛かっています。今私は小さな男の子/女の子が左から右にリボンをドラッグし、現在をアンラップしたい。これを行うための最善の方法は何ですか、それはMEANスタックに適していますか？

Answer 1

これは非常に広い質問です。それはあなたが達成したいアニメーションの種類に完全に依存します。

はそれにもかかわらず、ここでの経験に基づいて私のお気に入りのライブラリのほんの一部です：

AOS（スクロールでアニメーション化） -

これでHTML要素をアニメーション化し、純粋なCSS3駆動アニメーションライブラリです多くの便利な方法。

デモ：http://michalsnik.github.io/aos/

コード：https://github.com/michalsnik/aos

実装： あなたは、あなたのプロジェクトで使用するためにインストールするには、パッケージマネージャー（NPMか亭）を使用することができます。または、ソースコードを直接ダウンロードしてください。

スパークスクロール - また、スクロールベースのアニメーションだけでなく、ビューポートの可視性に基づいてアニメーションを扱う

JavaScriptライブラリ。非常に強力で、ビューへのスクロール時にHTML要素に罫線を描き、ビューポートの可視性（すなわち不透明度）に基づいてスタイリングの変更をトリガーするなど、多くのことが可能です。また、非常にカスタマイズ可能。

デモ：http://gilbox.github.io/spark-scroll/demo/

コード：https://github.com/gilbox/spark-scroll

実装：

は残念ながら、このライブラリにはネイティブのJavascriptの実装はありません。 Spark Scrollを使用するには、ReactJS（Facebook）またはAngular（Google）のいずれかを使用する必要があります。

、

なく、少なくとも最後

WOW。js -

さまざまなアニメーションを扱う別のJavascriptライブラリです。

デモ：http://mynameismatthieu.com/WOW/

コード：https://github.com/matthieua/WOW

実装：http://mynameismatthieu.com/WOW/docs.html

は正直なところ、私はあなたがあなたの投稿を編集し、正確にあなたが達成しようとしているものを識別示唆しています。私が提供したリソースでいくつかの調査を行い、あなたが実装したいアニメーションを決定した後、この回答を更新します。