AngularJSアニメーション
AngularJSは、CSSの助けを借りて、アニメーション化されたトランジションを提供します。
アニメーションとは何ですか？
アニメーションとは、HTML要素の変換によって動きの錯覚が生じる場合です。
例：
チェックボックスをオンにして、DIVを非表示にします。
<body ng-app="ngAnimate">
Hide the DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
アプリケーションはアニメーションで埋めるべきではありませんが、アニメーションによってはアプリケーションを理解しやすくすることができます。
私には何が必要なのだろう？
アプリケーションをアニメーション用に準備するには、AngularJSAnimateライブラリを含める必要があります。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
ngAnimate次に、アプリケーションでモジュールを参照する必要があります。
<body ng-app="ngAnimate">
または、アプリケーションに名前がある場合は、アプリケーションモジュールに依存関係として追加ngAnimateします。
例
<body ng-app="myApp">
<h1>Hide the DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app =
angular.module('myApp', ['ngAnimate']);
</script>
ngAnimateは何をしますか？
ngAnimateモジュールは、クラスを追加および削除します。
ngAnimateモジュールはHTML要素をアニメーション化しませんが、ngAnimateがHTML要素の非表示や表示などの特定のイベントに気付くと、要素はアニメーションの作成に使用できるいくつかの事前定義されたクラスを取得します。
クラスを追加/削除するAngularJSのディレクティブは次のとおりです。
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-showandディレクティブは、クラス値ng-hideを追加または削除します。ng-hide
他のディレクティブはng-enter、DOMに入るときにクラス値を追加しng-leave、DOMから削除されるときに属性を追加します。
ディレクティブは、HTML要素の位置が変更されたときにクラス値ng-repeatも追加します。ng-move
さらに、アニメーション中、HTML要素には一連のクラス値が含まれ、アニメーションが終了すると削除されます。例：
ng-hideディレクティブはこれらのクラス値を追加します：
ng-animateng-hide-animateng-hide-add（要素が非表示になる場合）ng-hide-remove（要素が表示される場合）ng-hide-add-active（要素が非表示になる場合）ng-hide-remove-active（要素が表示される場合）
CSSを使用したアニメーション
CSSトランジションまたはCSSアニメーションを使用して、HTML要素をアニメーション化できます。このチュートリアルでは、両方を紹介します。
CSSアニメーションの詳細については、 CSS移行チュートリアルと CSSアニメーションチュートリアルをご覧ください 。
CSSトランジション
CSSトランジションを使用すると、CSSプロパティ値を、特定の期間にわたって、ある値から別の値にスムーズに変更できます。
例：
DIV要素が.ng-hideクラスを取得すると、遷移には0.5秒かかり、高さは100pxから0にスムーズに変化します。
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide
{
height: 0;
}
</style>
CSSアニメーション
CSSアニメーションを使用すると、CSSプロパティ値を、特定の期間にわたって、ある値から別の値にスムーズに変更できます。
例：
DIV要素が.ng-hideクラスを取得すると、myChange
アニメーションが実行され、高さが100pxから0にスムーズに変更されます。
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>