最新のWeb開発のチュートリアル
 

AngularJSアニメーション

❮前 次の章❯

AngularJSは、CSSからの助けを借りて、アニメーションの遷移を提供します。

アニメーションとは何ですか？

HTML要素の変換はあなたの動きの錯覚を与えるときにアニメーションがあります。

例：

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

<body ng-app="ngAnimate">

Hide the DIV: <input type="checkbox" ng-model="myCheck">

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

</body>
»それを自分で試してみてください
注意 アプリケーションは、アニメーションで満たされるべきではないが、いくつかのアニメーションは理解したアプリケーションを容易にすることができます。

私は何が必要ですか？

アニメーションのためのアプリケーションの準備ができようにするには、AngularJSアニメーションライブラリを含める必要があります。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

ng-showとng-hideディレクティブは、追加または削除ng-hideクラス値を。

他のディレクティブが追加されますng-enter彼らはDOMを入力し、クラス値、およびng-leaveそれらはDOMから削除された属性を。

ng-repeatディレクティブも追加されますng-move HTML要素が位置を変更したときにクラス値を。

また、アニメーション中に 、HTML要素は、アニメーションが終了したときに削除される、クラスの値のセットを持っています。 例： ng-hideディレクティブは、これらのクラス値を追加します：

  • ng-animate
  • ng-hide-animate
  • ng-hide-add （要素が非表示になります場合）
  • ng-hide-remove （要素が示されたされる場合）
  • ng-hide-add-active （要素が非表示になります場合）
  • ng-hide-remove-active （要素が示されたされる場合）

CSSを使用したアニメーション

私たちは、HTML要素をアニメーション化するために、CSSのトランジションやCSSアニメーションを使用することができます。 このチュートリアルでは、両方が表示されます。

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>
»それを自分で試してみてください

❮前 次の章❯