• 概要
• addClass(element, className, doneCallback)
• enabled(value)
• enter(element, parentElement, afterElement, doneCallback)
• leave(element, doneCallback)
• move(element, parentElement, afterElement, doneCallback)
• removeClass(element, className, doneCallback)

概要

$animateサービスは、addClassとremoveClassはもちろんのこと、 DOM操作(enter、leave、move)が実行されている間のアニメーションの検知をサポートします。 これらの操作のいずれかが実行されている場合、$animateサービスはDOM操作が実行された要素に提供されているCSSクラスに対しての CSS定義のアニメーションとJavaScript定義($animateProviderプロバイダオブジェクトを使用することによって定義された)のアニメーションを調べます。

$animateサービスは、既存ディレクティブであれば、特別な設定無しですぐに使用することが可能です。

ngAnimateモジュールがインストールされている必要があります。

ngAnimateモジュールの概要ページを参照して、 詳細なアプリケーション上でのアニメーションの使用について確認してみてください。

addClass(element, className, doneCallback)

classNameの値を基にしたカスタムアニメーションイベントをトリガし、className値を要素にCSSクラスとして割り当てます。 他のアニメーションメソッドと異なり、animateサービスは-addをclassName値に接尾辞として追加することで、 animateサービスをセットアップする方法とCSSクラスをアクティブにしてアニメーションをトリガする方法を提供します。 (もし、CSSトランジションまたはキーフレームが、-addまたは基になるCSSクラスに定義されていない場合はスキップされます)

下記で、addClassアニメーションの各ステップで、何が行われているのかを説明します。

	アニメーション	要素のclass属性は、どのように見えるか
1.	$animate.addClass(element, 'super')が呼び出されます。	class="my-animation"
2.	$animateは、要素のJavaScript定義のアニメーションを実行します。	class="my-animation ng-animate"
3.	.super-addクラスが要素に追加されます。	class="my-animation ng-animate super-add"
4.	$animateは、要素のスタイルを調べてCSSトランジション/アニメーションのdurationとdelay(遅延)の情報を取得します。	class="my-animation ng-animate super-add"
5.	$animateは10ms待機します。(これは、リフローを発生させます。)	class="my-animation ng-animate super-add"
6.	.super、.super-add-active、.ng-animate-activeのクラスが追加されます。 (これは、CSSトランジション/アニメーションをトリガします)	class="my-animation ng-animate ng-animate-active super super-add super-add-active"
7.	$animateは、アニメーションが完了するまでの数ミリ秒待機します。	class="my-animation super-add super-add-active"
8.	アニメーションが終了し、生成された全てのCSSクラスが要素から削除されます。	class="my-animation super"
9.	superクラスは要素上に保持されます。	class="my-animation super"
10.	コールバック関数のdoneCallback()が実行されます。(提供されていれば)	class="my-animation super"

引数	説明
element	型：jQuery/jqLite要素 アニメーションさせたい要素を指定します。
className	型：string 要素に追加し、その後アニメーションさせたいCSSクラスを指定します。
doneCallback(optional)	型：function() アニメーションが完了した際に呼び出されるコールバック関数を指定します。

enabled(value)

戻り値:boolean

アニメーションの有効/無効化の指定をグルーバル空間単位で指定します。 現在のアニメーションの状態が、戻り値になります。

引数	説明
value(optional)	型：boolean 指定されると、アニメーションのON/OFFが設定されます。

enter(element, parentElement, afterElement, doneCallback)

Document内のparentElementの要素へ、element要素を追加し、enterアニメーションを実行します。 アニメーションが開始すると、下記のCSSクラスが要素をアニメーションさせるために提供されます。

下記で、enterアニメーションの各ステップで、何が行われているのかを説明します。

	アニメーション	要素のclass属性は、どのように見えるか
1.	$animate.enter(...)が呼び出されます。	class="my-animation"
2.	parentElement要素内、afterElement要素の隣にelement要素が挿入されます。	class="my-animation"
3.	$animateは、要素のJavaScript定義アニメーションを実行します。	class="my-animation ng-animate"
4.	.ng-enterクラスが要素に追加されます。	class="my-animation ng-animate ng-enter"
5.	$animateは、要素のスタイルを調べ、CSSトランジション/アニメーションのdurationとdelayを取得します。	class="my-animation ng-animate ng-enter"
6.	$animateは10ミリ秒待機します。(これは、リフローを発生させます。)	class="my-animation ng-animate ng-enter"
7.	ng-enter-activeと.ng-animate-activeのクラスが追加されます。 (これは、CSSトランジション/アニメーションをトリガします。)	class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active"
8.	$animateはアニメーションが完了するまでの数ミリ秒を待機します。	class="my-animation ng-animate ng-animate-active ng-enter ng-enter-active"
9.	アニメーションが終了し、生成された全てのCSSクラスが要素から削除されます。	class="my-animation"
10.	コールバック関数doneCallback()が実行されます。(提供されていれば)	class="my-animation"

引数	説明
element	型：jQuery/jqLite要素 enterアニメーションの対象となる要素を指定します。
parentElement	型：jQuery/jqLite要素 enterアニメーションの対象となる要素の親要素を指定します。
afterElement	型：jQuery/jqLite要素 enterアニメーションの対象となる要素の、隣(これは前要素になる)になる要素を指定します。
doneCallback(optional)	型：function() アニメーションが完了した際に呼び出されるコールバック関数を指定します。

leave(element, doneCallback)

leaveアニメーションを実行し、完了時にDOMから要素を削除します。 アニメーションが開始されると、durationのために下記のCSSクラスが追加されます。

下記で、enterアニメーションの各ステップで、何が行われているのかを説明します。

	アニメーション	要素のclass属性は、どのように見えるか
1.	$animate.leave(...)が呼び出されます。	class="my-animation"
2.	$animateが要素上のJavaScript定義アニメーションを実行します。	class="my-animation ng-animate"
3.	.ng-leaveクラスが要素に追加されます。	class="my-animation ng-animate ng-leave"
4.	$animateは、要素のスタイルを調べ、CSSトランジション/アニメーションのdurationとdelayを取得します。	class="my-animation ng-animate ng-leave"
5.	$animateは10ミリ秒待機します。(これは、リフローを発生させます。)	class="my-animation ng-animate ng-leave"
6.	ng-leave-activeと.ng-leave-activeのクラスが追加されます。 (これは、CSSトランジション/アニメーションをトリガします。)	class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active"
7.	$animateはアニメーションが完了するまでの数ミリ秒を待機します。	class="my-animation ng-animate ng-animate-active ng-leave ng-leave-active"
8.	アニメーションが終了し、生成された全てのCSSクラスが要素から削除されます。	class="my-animation"
9.	DOMから要素が削除されます。	...
10.	doneCallback()のコールバック関数が実行されます。(提供されていれば)	...

引数	説明
element	型：jQuery/jqLite要素 leaveアニメーションの対象となる要素を指定します。
doneCallback(optional)	型：function() アニメーションが完了した際に呼び出されるコールバック関数です。

move(element, parentElement, afterElement, doneCallback)

moveのDOM操作を実行します。 アニメーションが開始される直前、animateサービスはparentElement要素にelementを追加、 またはafterElementが提供されれば、直接afterElement要素の後ろにelementを追加します。 その後、moveアニメーションが実行されます。 アニメーションが開始されると、durationのために下記のCSSクラスが追加されます。

下記で、moveアニメーションの各ステップで、何が行われているのかを説明します。

	アニメーション	要素のclass属性は、どのように見えるか
1.	$animate.move(...)が呼び出されます。	class="my-animation"
2.	elementがparentElement要素内、またはafterElement要素の隣に移動されます。	class="my-animation"
3.	$animateは、要素のJavaScript定義アニメーションを実行します。	class="my-animation ng-animate"
4.	.ng-moveクラスが要素に追加されます。	class="my-animation ng-animate ng-move"
5.	$animateは、要素のスタイルを調べ、CSSトランジション/アニメーションのdurationとdelayを取得します。	class="my-animation ng-animate ng-move"
6.	$animateは10ミリ秒待機します。(これは、リフローを発生させます。)	class="my-animation ng-animate ng-move"
7.	.ng-move-activeと.ng-animate-activeクラスが追加されます。 (これは、CSSトランジション/アニメーションをトリガします。)	class="my-animation ng-animate ng-animate-active ng-move ng-move-active"
8.	$animateはアニメーションが完了するまでの数ミリ秒を待機します	class="my-animation ng-animate ng-animate-active ng-move ng-move-active"
9.	アニメーションが終了し、生成された全てのCSSクラスが要素から削除されます。	class="my-animation"
10.	コールバック関数doneCallback()が実行されます。(提供されていれば)	class="my-animation"

引数	説明
element	型：jQuery/jqLite要素 moveアニメーションの対象となる要素を指定します。
parentElement	型：jQuery/jqLite要素 moveアニメーションの対象となる要素の親要素を指定します。
afterElement	型：jQuery/jqLite要素 moveアニメーションの対象となる要素の隣の要素(前の要素になります)を指定します。
doneCallback(optional)	型：function() アニメーションが完了すると呼び出されるコールバック関数を指定します。

removeClass(element, className, doneCallback)

classNameの値を基にしたカスタムアニメーションイベントをトリガし、要素から提供されたclassName値のCSSクラスを削除します。 他のアニメーションメソッドと異なり、animateサービスは-removeをclassName値に接尾辞として追加することで、 animateサービスをセットアップする方法とCSSクラスをアクティブにしてアニメーションをトリガする方法を提供します。 (もし、CSSトランジションまたはキーフレームが、-removeまたは基になるCSSクラスに定義されていない場合はスキップされます)

下記で、removeClassアニメーションの各ステップで、何が行われているのかを説明します。

	アニメーション	要素のclass属性は、どのように見えるか
1.	$animate.removeClass(element, 'super')が呼び出されます。	class="my-animation super"
2.	$animateは、要素のJavaScript定義のアニメーションを実行します。	class="my-animation ng-animate"
3.	.super-removeクラスが要素に追加されます。	class="my-animation super ng-animate super-remove"
4.	$animateは、要素のスタイルを調べてCSSトランジション/アニメーションのdurationとdelay(遅延)の情報を取得します。	class="my-animation super ng-animate super-remove"
5.	$animateは10ms待機します。(これは、リフローを発生させます。)	class="my-animation super ng-animate super-remove"
6.	.super、.super-remove-active、.ng-animate-activeのクラスが追加され、.superが削除されます。 (これは、CSSトランジション/アニメーションをトリガします)	class="my-animation ng-animate ng-animate-active super-remove super-remove-active"
7.	$animateは、アニメーションが完了するまでの数ミリ秒待機します。	class="my-animation super-add super-add-active"
8.	アニメーションが終了し、生成された全てのCSSクラスが要素から削除されます。	class="my-animation"
9.	コールバック関数のdoneCallback()が実行されます。(提供されていれば)	class="my-animation"

引数	説明
element	型：jQuery/jqLite要素 アニメーションさせたい要素を指定します。
className	型：string アニメーションさせ、その後要素から削除したいCSSクラスを指定します。
doneCallback(optional)	型：function() アニメーションが完了した際に呼び出されるコールバック関数を指定します。

 Back to top