Angularjsアニメーション
AngularJSは、CSSで使用できるアニメーション効果を提供します。
AngularJSはアニメーションを使用して、Angular-Animate.min.jsライブラリを導入します。
<スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.4.6/Angular-animate.min.js"> </script>
また、アプリケーションでモデルnganimateを使用する必要があります。
<body ng-app = "nganimate">
アニメーションとは何ですか？
アニメーションは、HTML要素を変更することで生成される動的な変更効果です。
例
チェックボックスをチェックして、Divを非表示にします。
<！doctype html> <html> <head> <meta charset = "utf-8"> <style> div {transition：すべて線形0.5s;背景色：LightBlue;高さ：100px;幅：100％;位置：相対;上：0;左：0;}。ng-hide {height：0;幅：0;背景色：透明;トップ：-200px;左：200px;} </style> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.4.6/Angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> <h1> disiv：<input type = "checkbox" ng-model = ""> </h1> <div ng-hide = "mycheck"> </div> </body> </html>ランニング効果：
注：アプリケーションにはあまりにも多くのアニメーションがあるはずですが、アニメーションを適切に使用すると、ページの豊かさが高まり、ユーザーが理解しやすくなります。
アプリケーションがすでにアプリケーション名を設定している場合、モデルに直接nganimateを追加できます。
例
<！doctype html> <html> <head> <meta charset = "utf-8"> <style> div {transition：すべて線形0.5s;背景色：LightBlue;高さ：100px;幅：100％;位置：相対;上：0;左：0;}。ng-hide {height：0;幅：0;背景色：透明;トップ：-200px;左：200px;} </style> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app "> <h1> didiv：<入力タイプ="チェックボックス "ng-model =" mycheck "> </h1> <div ng-hide = "mycheck"> </div> <script> var app = angular.module（ 'myapp'、['nganimate']）; </script> </body> </html>ランニング効果：
Nganimateは何をしましたか？
nganimateモデルは、クラスを追加または削除できます。
nganimateモデルはHTML要素をアニメーション化することはできませんが、NganimateはHTML要素の非表示と表示と同様にイベントを監視します。イベントが発生した場合、Nganimateは事前定義されたクラスを使用してHTML要素をアニメーション化します。
AngularJS指令クラスを追加/削除する：
ng-show
ng-hide
ngクラス
ng-view
ng-clude
ng-repeat
ng-if
ng-switch
ng-showおよびng-hideディレクティブは、ng-hideクラスの値を追加または削除するために使用されます。
他のディレクティブは、DOMを入力するときにNG-Enterクラスを追加し、DOMを削除すると、Ng-Leaveプロパティが追加されます。
HTML要素の位置が変更されると、NG-ReepeatディレクティブはNG-Moveクラスを追加することもできます。
さらに、アニメーションが完了すると、HTML要素のクラスコレクションが削除されます。たとえば、NG-Hideディレクティブに次のクラスが追加されます。
ng-animate
ng-hide-animate
ng-hide-add（要素が非表示になる場合）
ng-hide remove（要素が表示される場合）
ng-hide-add-active（要素が非表示になる場合）
ng-hide-remove-active（要素が表示される場合）
CSSアニメーションを使用します
CSSトランジションまたはCSSアニメーションを使用して、HTML要素をアニメーション化できます。 CSSトランジションチュートリアルとCSSアニメーションチュートリアルを参照できます。
CSS遷移
CSS遷移により、1つのCSS属性値を別のCSS属性値にスムーズに変更できます。
例
Div要素に.ng-hideクラスセットがある場合、遷移には0.5秒かかり、高さは100pxから0に変化します。
<！doctype html> <html> <head> <meta charset = "utf-8"> <style> div {transition：すべて線形0.5s;背景色：LightBlue;高さ：100px;}。ng-hide {height：0;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> <スクリプトsrc = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app "> <h1> didiv：<入力タイプ="チェックボックス "ng-model =" mycheck "> </h1> <div ng-hide = "mycheck"> </div> <script> var app = angular.module（ 'myapp'、['nganimate']）; </script> </body> </html>CSSアニメーション
CSSアニメーションを使用すると、CSSプロパティ値をスムーズに変更できます。
例
.ng-hideクラスがdiv要素に設定されると、mychangeアニメーションが実行され、高さが100pxにスムーズに変更されます。
<！doctype html> <html> <head> <meta charset = "utf-8"> <style> @keyframes mychange {from {height：100px; } to {height：0; }} div {height：100px;バックグラウンドコラー：LightBlue;} div.ng-hide {animation：0.5s mychange;} </style> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/Angular.min.js"> </script> < src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate" ng-hide = "mycheck"> </div> </body> </html>上記は、AngularJSアニメーションに関する情報のコレクションです。必要に応じて参照してください。