AngularJS アニメーション


AngularJS は、CSS で使用できるアニメーション効果を提供します。

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

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

アプリケーション ngAnimate でもモデルを使用する必要があります: 

<body ng-app="ngAnimate">

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

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

インスタンス

DIVを非表示にするには、チェックボックスをオンにします:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

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

</body>
</html>

インスタンスの実行»

オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックします

Note 応用 アニメーションが多すぎてはいけませんが、アニメーションを適切に使用することでページの豊かさが増し、ユーザーが理解しやすくなります。

アプリケーションにアプリケーション名が設定されている場合は、ngAnimate をモデルに直接追加できます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<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>

</body>
</html>

インスタンスを実行»

「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します

ngAnimate が完了しました 何か?

ngAnimate モデルはクラスを追加または削除できます。

ngAnimate モデルは HTML 要素をアニメーション化できませんが、HTML 要素の非表示や表示などのイベントを監視します。イベントが発生すると、ngAnimate は事前定義されたクラスを使用して HTML 要素をアニメーション化します。

クラスを追加/削除するための AngularJS 手順:

  • ng-showng-show

  • ng-hide

  • ng-class

  • ng-view

  • ng-include

  • ng-repeat

  • ng-if

  • ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 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 transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果，该部分内容你可以参阅我们的CSS 过渡教程，CSS 动画教程。

CSS 过渡

CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个：

实例

在 DIV 元素设置了 .ng-hide 类时，过渡需要花费 0.5 秒，高度从 100px 变为 0:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
}

.ng-hide {
  height: 0;
}
</style>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<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>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS 动画

CSS 动画允许你平滑的修改 CSS 属性值:

实例

在 DIV 元素设置了 .ng-hide 类时,  myChange

ng-hide

< code >ng-class
🎜🎜ng-view🎜🎜🎜ng-include🎜🎜🎜 < code>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 要素をアニメーション化できます。この部分では、CSS トランジション チュートリアル、CSS アニメーション チュートリアルを参照してください。 🎜🎜🎜CSS トランジション🎜🎜 CSS トランジションを使用すると、ある CSS プロパティ値を別の CSS プロパティ値にスムーズに変更できます: 🎜🎜

インスタンス

🎜DIV 要素 > クラスに .ng-hide<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @keyframes myChange {   from {       height: 100px;   } to {       height: 0;   } } div {   height: 100px;   background-color: lightblue; } div.ng-hide {   animation: 0.5s myChange; } </style> <script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script> </head> <body ng-app="ngAnimate"> 隐藏 DIV: <input type="checkbox" ng-model="myCheck"> <div ng-hide="myCheck"> </div> </body> </html>🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックしてオンライン例を表示します🎜🎜🎜🎜🎜CSSアニメーション🎜🎜 CSS アニメーションを使用すると、CSS プロパティ値をスムーズに変更できます: 🎜🎜

インスタンス

🎜 DIV 要素が .ng-hide クラスで設定されている場合、myChange アニメーションが実行され、高さが 100px から 0 にスムーズに変更されます:🎜🎜🎜Example🎜🎜rrreee🎜
インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します