AngularJS アニメーション

AngularJS はアニメーション効果を提供し、CSS と組み合わせて使用できます。

AngularJS でアニメーションを使用するには、angular-animate.min.js ライブラリを導入する必要があります。

<script src="../libs/angular.js/1.4.6/angular-animate.min.js.html"></script>

さらに、アプリケーションでモジュール ngAnimate を使用する必要があります：

<body ng-app="ngAnimate">

アニメーションとは？

アニメーションとは、HTML 要素を変化させることによって生じる動的な変化効果です。

例

チェックボックスをオンにして DIV を非表示にする：

<body ng-app="ngAnimate">

DIV を非表示：<input type="checkbox" ng-model="myCheck">

<div ng-hide="myCheck"></div>

</body>

試してみる »
Note アプリケーション内でアニメーションを使用しすぎるのは良くありませんが、適切に使用することでページの豊かさが増し、ユーザーが理解しやすくなります。

アプリケーションにすでにアプリケーション名を設定している場合は、ngAnimate を直接モジュールに追加できます：

例

<body ng-app="myApp">

<h1>DIV を非表示：<input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>

<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

試してみる »

ngAnimate は何をするのか？

ngAnimate モジュールは class を追加または削除できます。

ngAnimate モジュールは HTML 要素にアニメーションを発生させることはできませんが、ngAnimate はイベントを監視します。たとえば、HTML 要素の非表示や表示などのイベントが発生すると、ngAnimate は事前定義された class を使用して HTML 要素のアニメーションを設定します。

AngularJS が class を追加/削除するディレクティブ：

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-showとng-hideディレクティブは、追加または削除するために使用されます。ng-hideclass の値。

他のディレクティブは、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 トランジション（遷移）または CSS アニメーションを使用して HTML 要素にアニメーション効果を持たせることができます。この部分については、以下のチュートリアルを参照してください：CSS トランジションチュートリアル， CSS アニメーションチュートリアル。

CSS トランジション

CSS トランジションを使用すると、ある CSS プロパティの値を別の値に滑らかに変更できます：

例

DIV 要素に設定されている.ng-hideclass のとき、トランジションには 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-hideclass のとき、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>

試してみる »
その他の拡張