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 模型可以新增或移除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-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

動畫將執行，它會平滑的將高度從100px 變為0:

#實例

<!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>


執行實例 »

點擊 "執行實例" 按鈕查看線上實例

#