AngularJSアニメーション
AngularJSアニメーションを提供し、あなたはCSSで使用することができます。
AngularJSアニメーションは、角-animate.min.jsライブラリーを導入する必要があります。
<script src="http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
これは、アプリケーションモデルngAnimateで使用する必要があります。
<body ng-app="ngAnimate">
アニメーションとは何ですか？
アニメーションが生成されたHTML要素を変更することによって、動的な効果です。
例
DIVを非表示にするには、このチェックボックスを選択します。
隠すDIV：の<input type = "チェックボックス " NG-モデル= "myCheck">
<DIV ngの非表示= "myCheck "> </ div>の
</ BODY>
»をお試しください
 | アニメーションのアニメーションアプリケーションあまりないが、適切な使用は、ページの豊かさを向上させることができ、またはユーザーがより簡単に理解できるようにすることができます。 |
|---|
私たちは、アプリケーションの名前が設定されている適用する場合は、ngAnimateがモデルに直接追加置くことができます：
例
<H1>隠すDIV：の<input type = "チェックボックス " NG-モデル= "myCheck"> </ H1>
<DIV ngの非表示= "myCheck "> </ div>の
<スクリプト>
»をお試しください
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
ng-showとng-hide追加または削除するためのコマンドng-hideクラスの値を。
他の命令は、DOMに追加されますng-enter DOMが追加されます削除、クラスng-leaveプロパティを。
ときにHTML要素の位置が変化し、 ng-repeatコマンドも追加することができます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のトランジション（移行）またはHTML要素をアニメーションCSSアニメーション、あなたが私たちの見ることができる部分に使用できるCSSの移行チュートリアル 、 CSSアニメーションのチュートリアルを 。
CSSトランジション
CSSは私たちに別のものに変更されたCSSプロパティの値へのスムーズな移行を可能にします：
例
DIV要素のセットでは.ng-hideクラスを、遷移が0.5秒、100pxに0からの高さを取ります。
div要素{
トランジション：すべての線形0.5秒。
背景色：水色。
高さ：100pxに。
}
.ng隠します{
高さ：0;
}
</スタイル>
»をお試しください
CSSアニメーション
CSSアニメーションでは、CSSプロパティの値を変更滑らかにすることができます：
例
設定DIV要素で.ng-hide -timeクラスを、 myChangeアニメーションが実行され、それは100pxにから0に滑らかな高さになります。
@keyframes myChange {
{から
高さ：100pxに。
} {へ
高さ：0;
}
}
div要素{
高さ：100pxに。
背景色：水色。
}
div.ng隠します{
アニメーション：0.5秒myChange。
}
</スタイル>
»をお試しください