序文
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">
1。アニメーションとは何ですか？
アニメーションは、HTML要素を変更することで生成される動的な変更効果です。
<！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 = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> </head> <body ng-app = "nganimate"> <h3> div：<<punt = " 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> <script src = "js/angular.min.js"> </script> <script src = "js/angular-animate.min.js"> </script> </head> ng-hide = "mycheck"> </div> <script> var app = angular.module（ 'myapp'、['nganimate']）; </script> </body> </html>2。Nganimateは何をしましたか？
ngAnimateモデルは、クラスを追加または削除できます。 ngAnimateモデルはHTML要素をアニメーション化することはできませんが、 ngAnimate HTML要素の非表示と表示と同様にイベントを監視します。イベントが発生した場合、 ngAnimate事前定義されたクラスを使用してHTML要素をアニメーション化します。 AngularJSディレクティブクラスを追加/削除： ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch 。
（1）NGクラスは、HTML要素で使用されるCSSクラスを指定します
ng-classディレクティブは、1つ以上のCSSクラスをHTML要素に動的にバインドするために使用されます。 ng-classディレクティブの値は、文字列、オブジェクト、または配列です。文字列の場合、複数のクラス名がスペースで区切られています。オブジェクトの場合、ブール値であるキー値ペアを使用する必要があり、値は追加するクラス名です。キーがtrueの場合にのみクラスが追加されます。配列の場合、オブジェクトの文字列または組み合わせで構成され、配列の要素は文字列またはオブジェクトにすることができます。
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </scrip> <scrip src = "js/angular-animate.js"> </script> <style>背景色：LightBlue;パディング：20px;フォントファミリー： "Courier new";}。トマト{background-color：coral;パディング：40px;フォントファミリー：verdana;} </style> </head> <body ng-app = "" "> <span> select a class：</span> <select ng-model =" home "> <option value =" sky "> sky color </option> <option value">トマト値 "それ！</h4> </div> </body> </html>（2）Ng-Class-evenはNGクラスに似ていますが、偶数行でのみ動作します。 Ng-Class-ODDはNGクラスに似ていますが、奇数線でのみ動作します。 Ng-Class-ODDはNGクラスに似ていますが、奇数線でのみ動作します。
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <scrip = "js/angular.min.js"> </scrip> <style> .stripedeven {color：white;バックグラウンドカラー：cyan;}。stripedodd {color：white;バックグラウンドカラー：yellowgreen;} </style> </head> <body ng-app = "myapp"> <table ng-controller = "myctrl"> <tr> <th> name </th> <th> </tr> <tr ng-repeat = "x in records" ng-class-even = " <td> {{x.name}} </td> <td> {{x.country}} </td> </tr> </table> <script> var app = angular.module（ "myapp"、[]）; app.controller（ "myctrl"、$ scope）{$ scope. ""： ""： "" "" "" "" "" "" ""：scope = scope（$ scope） futterkiste "、" country "：" germany "}、{" name "：" berglunds snabbk "、" country "：" sweden "}、{" name "：" Centro Comercial Moctezuma "、" Country "：" Mexico "}、{name"： "countria"、 ]}）; </script> </body> </html>（3）ng-if条件が誤っている場合は、HTML要素を削除します
ng-ifディレクティブは、式が偽の場合にHTML要素を削除するために使用されます。 IFステートメントの実行の結果がtrueである場合、削除された要素が追加されて表示されます。 ng-if指令はng-hideとは異なり、 ng-hide要素を隠し、 ng-ifはDOMから要素を削除します。
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </scrip> </head> <body ng-app = "" ng-init = "check =" <html = <html ng-model = "myvar"> </h3> <div ng-if = "myvar"> <h1>ようこそ</h1> <p>私の家へようこそ。 </p> <p>チェックボックスが再選択されると、div要素が再表示されます。 </p> </body> </html>
（4）Ng-checked要素が選択されているかどうかを指定します
ng-checkedディレクティブは、チェックボックスまたはラジオボタンのチェックされたプロパティを設定するために使用されます。 ng-checkedプロパティがtrueを返す場合、チェックボックスまたはラジオボタンが選択されます。
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </scrip> </head> <body ng-app = "" "> <h3>私の車= < <入力タイプ= "チェックボックス" ng-checked = "all"> volvo <br> <input type = "ng-checked =" all "> ford <br> <入力タイプ="チェックボックス "ng-checked =" all "> ford <br> <input type =" checkbox "ng-checked =" all "oll"> checked = "checked =" All "車。 </h3> </body> </html>
3. CSSアニメーションを使用します
CSSトランジションまたはCSSアニメーションを使用して、HTML要素をアニメーション化できます。
（1）CSS遷移
CSS遷移により、1つのCSS属性値を別のCSS属性値をスムーズに変更できます。.ng .ng-hideクラスがDiv要素に設定されている場合、遷移には0.5秒かかり、高さは100pxから0に変化します。
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </scrip> <scrip src = "js/angular-animate.min.js背景色：LightBlue;高さ：100px;}。ng-hide {height：0;} </style> </head> <body ng-app = "myapp"> <h1> div：<input type = "checkbox" ng-model = "mycheck"> </h1> <div ng-hide = "mycheck"> ['nganimate']）; </script> </body> </html>（2）CSSアニメーション
CSSアニメーションを使用すると、CSS属性値をスムーズに変更できます。.ng .ng-hideクラスがdiv要素に設定されている場合、 myChangeアニメーションが実行され、高さが100pxから0にスムーズに変更されます。
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title> angularjs </title> <script src = "js/angular.min.js"> </scrip> <scrip src = "js/angular-animate.min.js }から{height：10; }} div {height：100px;バックグラウンドカラー：lightblue;} div.ng-hide {animation：10s mychange;} </style> </head> <body ng-app = "nganimate"> dise div：<input type = "checkbox" ng-model = "mycheck"> <div ng-hide = "mycheck"> </div> </html> </html>要約します
上記は、Angularjsアニメーションに関するものです。この記事では、それを詳細に要約し、サンプルコードを提供します。いくつかのAngularjsを学ぶすべての人に役立つことを願っています。