AngularJS アニメーション

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

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

アニメーションは、HTML要素の変換が動きの錯覚を与えることです。

インスタンス

チェックボックスを選択してDIVを隠します：

<body ng-app="ngAnimate">
DIVを隠す：<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>

自分で試してみる

アプリケーションはアニメーションでいっぱいにしないでくださいが、いくつかのアニメーションはアプリケーションをより理解しやすくします。

私が何を必要としていますか？

あなたのアプリケーションがアニメーションに準備するために、AngularJS Animate ライブラリを含める必要があります：

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-animate.js"></script>

次に、アプリケーション内で参照する必要があります。 ngAnimate モジュール：

<body ng-app="ngAnimate">

または、アプリケーションに名前がある場合、 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 クラスを追加および削除します。

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トランジションやCSSアニメーションを使用してHTML要素にアニメーション効果を追加できます。このチュートリアルでは、これらの2つを説明します。

CSSアニメーションの詳細について学ぶには、私たちのCSSトランジションチュートリアルとCSSアニメーションチュートリアルを参照してください。

CSSのトランジション

CSSのトランジションは、指定された時間内にCSS属性値を滑らかに変更する機能を提供します：

インスタンス

DIV要素が取得したとき、 .ng-hide 現在時刻では、移行は0.5秒間持続し、高さは100pxから0にスムーズに移行します：

@keyframes myChange {
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}
.ng-hide {
  height: 0;
}
</style>

自分で試してみる

CSSアニメーション

CSSアニメーションは、指定された期間中にCSS属性値を滑らかに変更する方法を提供します：

インスタンス

DIV要素が取得したとき、 .ng-hide <style>

@keyframes myChange {
from {
  to {
    height: 100px;
  }
    height: 0;
  }
}
div {
  height: 100px;
  background-color: lightblue;
}
div.ng-hide {
  animation: 0.5s myChange;
}
</style>

自分で試してみる