AngularJSアプリケーションにCSSアニメーションを追加します

コアポイント

• AngularJSはCSSおよびJavaScriptアニメーションをサポートしており、ブラウザが優先順位を減らし、スレッドの処理をブロックしないため、CSSアニメーションを使用することをお勧めします。
Angularjsでアニメーションを使用するには、
• ライブラリを含めてangular-animate.jsモジュールを依存関係として追加する必要があります。このライブラリは、ngAnimate、ng-view、ng-repeat、ng-show、ng-hideなどの指示のアニメーションサポートを追加します。 ng-class
アニメーションは、遷移効果を改善し、要素の変更を強調し、要素表示を制御することにより、ユーザーエクスペリエンスを強化できます。 CSSの特定のクラスとプロパティを使用して適用でき、独自の効果を作成するためにカスタマイズできます。

AngularJSは、リッチなWebデータバインディングアプリケーションを構築するように設計されています。これらのアプリのアニメーションは、お気に入りのピザに材料を追加するようなものです。アニメーションはUIを美しくするだけでなく、ユーザーが使いやすくなります。アプリケーションの小さなアニメーションは、その豊かさを高める可能性があります。

今、ネットワークの力により、アニメーションを作成する方法はたくさんあります。最近まで、アニメーションはJavaScriptを通じてのみ実装されていました。しかし、現在、すべての主流ブラウザはCSS3をよくサポートしています。CSSを使用してWebサイトをアニメーション化することのみができます。

AngularJS 1.1.5ベータ版はアニメーションをサポートします。機能の安定したバージョンがAngularJS 1.2でリリースされる前に、多くの変更を経ました。 Angularアプリケーションにアニメーションサポートを追加または削除するのは非常に簡単です。このライブラリは、CSSベースとJavaScriptベースのアニメーションの両方に大きなサポートを提供します。アニメーションはJavaScriptで書くことができますが、CSSアニメーションをお勧めします。これは、ブラウザがCSSアニメーションの優先度を減らし、スレッドが重要なアクションを実行できる場合、スレッドの処理をブロックしないためです。

この記事では、CSSアニメーションを使用してAngularJの動作を組み込みのディレクティブの動作をより魅力的にする方法を学びます。この記事の範囲には、CSSがサポートするアニメーション機能は含まれていません。詳細については、SitePointのCSSチャネルを参照できます。

初心者

アニメーションを使用するには、

ライブラリを含めて、以下に示すようにモジュールの依存関係として

モジュールを追加する必要があります。 angular-animate.js ngAnimateこのライブラリは、次の指令で指定されたイベントのアニメーションサポートを追加します。

指令	事件
ng-view	enter、leave
ng-include	enter、leave
ng-switch	enter、leave
ng-if	enter、leave
ng-repeat	enter、leave、move
ng-show	add、remove
ng-hide	add、remove
ng-class	add、remove

これらのイベントは、命令状態の変更が発生すると自動的に生成されます。これらのイベントは、アプリケーションモジュールの依存関係としてngAnimateモジュールが渡された場合にのみ生成されることに注意する必要があります。これらのイベントが起動すると、適用された要素にCSSクラスを追加します。 CSSクラスの対応する名前は、上の表に記載されています。ご覧のとおり、イベントが発生したときに何が起こるかを自由に定義できます。

ng-viewアニメーション

ユーザーがあるビューから別のビューにナビゲートすると、ルートはクライアントで解決し、ページの一部が新しいコンテンツをロードします。これは非常に迅速に発生し、ユーザーはビューの変化が突然すぎると感じることがあります。このステップのアニメーションは、遷移を滑らかにします。

上の表を参照してください。ビューが変更されたときに

が2つのイベントを提起することがわかります。ビューが変更されたら、次のスタイルを適用しましょう。 ng-view

上記のCSSは、適用された要素への緩和遷移を適用し、遷移期間は1秒です。ただし、遷移中に変化する要素の属性を指定しないため、上記のスタイルだけでは効果がありません。いくつかのCSS属性の値を操作しましょう：

angular.module('coursesApp', ['ngAnimate']);

今やらなければならないのは、

.view-slide-in.ng-enter {
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;

  opacity: 0.5;
  position: relative;
  opacity: 0;
  top: 10px;
  left: 20px;
}

クラスを

ディレクティブに適用することです。 view-fade ng-view

さて、あるビューから別のビューにナビゲートすると、スライド効果を確認できます。任意のトランジションを適用したり、独自のキーフレームアニメーションを定義することもできます。デモでビュートランジションを使用して、より良い理解を得ることができます。

.view-slide-in.ng-enter {
  opacity: 0;
}
.view-slide-in.ng-enter.ng-enter-active {
  top: 0;
  left: 0;
  opacity: 1;
}
.view-slide-in.ng-leave.ng-leave-active {
  top: 5px;
  left: 5px;
  opacity: 1;
}
.view-slide-in.ng-leave {
  top: 0;
  left: 0;
  opacity: 0;
}

アニメーションng-repeat AngularJSアプリケーションで

を使用しないことはほとんど不可能です。モデルの更新、コレクションへのアイテムの追加または削除、ソートおよびフィルタリングアイテムの適用など、このディレクティブの機能のほとんどを使用することになります。これらの操作を実行すると、指令の項目は常に移動され、変更されます。

ng-repeatプロジェクトの変更を確認するために、要素の不透明度に線形遷移を適用しましょう。

今、リストに何かをしているとき、アイテムの混合とわずかなジッター効果が見られます。この効果は、上記で作成された

<div ng-view class="view-slide-in"></div>

クラスのプロジェクトの左側の位置属性の値を変更することによって引き起こされます。ランダムフィルタリングとソートをデモのアイテムリストに適用し、要素の動作を観察します。

ng-move

アニメーションng-hide

アニメーションは

アニメーションに似ています。唯一の違いは、ng-hideおよびng-viewの代わりにng-addおよびng-removeクラスを適用する必要があることです。 ng-enterディレクティブがそれを示したり隠したりしたら、プロジェクトを消し去りましょう。イベントを反転させることにより、同じアニメーションをng-leaveに適用できます。 ng-hide ng-show

デモでこのアニメーションを表示します。最初のページの右側にあるチェックボックスには、複製のいくつかのアイテムが隠されたり表示されたりします。

.repeat-animation.ng-enter,
.repeat-animation.ng-leave,
.repeat-animation.ng-move {
  -webkit-transition: all linear 1s;
  -moz-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;

  position: relative;
  left: 5px;
}
.repeat-animation.ng-enter {
  opacity: 0;
}
.repeat-animation.ng-enter.ng-enter-active {
  opacity: 1;
}
.repeat-animation.ng-leave {
  opacity: 1;
}
.repeat-animation.ng-leave.ng-leave-active {
  opacity: 0;
}
.repeat-animation.ng-move {
  left: 2px;
  opacity: 0.5;
}
.repeat-animation.ng-move.ng-move-active {
  left: 0;
  opacity: 1;
}

結論

Webブラウザーがますます強力になるにつれて、お客様はこれらの機能を最大限に活用し、高品質の製品を提供することを期待しています。 CSSのアニメーションサポートは非​​常に人気のある機能です。 CSSを使用してアニメーションを作成して使用することは、同じことを達成するために数行のJavaScriptコードを書くよりもはるかに簡単です。このチュートリアルが便利で、フィードバックを聞くことを楽しみにしています。

AngularJSアプリケーションにCSSアニメーションを追加する際のFAQ （記事が長すぎて擬似オリジナルの目標と一致しないため、FAQパーツはここで省略されています。FAQパーツの内容は元のテキストと非常に似ており、擬似オリジナルは困難です。したがって、それを保持すると、擬似オリジナル効果が減少します

以上がAngularJSアプリケーションにCSSアニメーションを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。