AngularJS入門之動畫

更新時(shí)間：2016年07月27日 11:53:56 投稿：daisy

AngularJS中ngAnimate模塊支持動畫效果，但是ngAnimate模塊并未包含在AngularJS核心庫中，因此需要使用ngAnimate需要在定義Module時(shí)聲明對其的引用。下面通過本文我們來看看AngularJS動畫的詳細(xì)介紹。

前言

AngularJS 提供了動畫效果，可以配合 CSS 使用。AngularJS 使用動畫需要引入 angular-animate.min.js 庫。

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

還需在應(yīng)用中使用模型 ngAnimate：

<body ng-app="ngAnimate">

1、什么是動畫？

動畫是通過改變 HTML 元素產(chǎn)生的動態(tài)變化效果。

<!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="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">
<h3>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h3>
<div ng-hide="myCheck"></div>
</body>
</html>

如果我們應(yīng)用已經(jīng)設(shè)置了應(yīng)用名，可以把 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="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">
<h3>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h3>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>

2、ngAnimate 做了什么?

ngAnimate 模型可以添加或移除 class 。ngAnimate 模型并不能使 HTML 元素產(chǎn)生動畫，但是 ngAnimate 會監(jiān)測事件，類似隱藏顯示 HTML 元素，如果事件發(fā)生 ngAnimate 就會使用預(yù)定義的 class 來設(shè)置 HTML 元素的動畫。AngularJS 添加/移除 class 的指令:ng-show、ng-hide、ng-class、ng-view、ng-include、ng-repeat、ng-if、ng-switch。

（1）、ng-class指定 HTML 元素使用的 CSS 類

ng-class 指令用于給 HTML 元素動態(tài)綁定一個(gè)或多個(gè) CSS 類。ng-class 指令的值可以是字符串，對象，或一個(gè)數(shù)組。如果是字符串，多個(gè)類名使用空格分隔。如果是對象，需要使用 key-value 對，key 是一個(gè)布爾值，value 為你想要添加的類名。只有在 key 為 true 時(shí)類才會被添加。如果是數(shù)組，可以由字符串或?qū)ο蠼M合組成，數(shù)組的元素可以是字符串或?qū)ο蟆?/p>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.js"></script>
<style>
.sky {
  color:white;
  background-color:lightblue;
  padding:20px;
  font-family:"Courier New";
}
.tomato {
  background-color:coral;
  padding:40px;
  font-family:Verdana;
}
</style>
</head>
<body ng-app="">
<span>選擇一個(gè)類:</span>
<select ng-model="home">
<option value="sky">天空色</option>
<option value="tomato">番茄色</option>
</select>
<div ng-class="home">
 <h3>Welcome Home!</h3>
 <h4>I like it!</h4>
</div>
</body>
</html>

（2）、ng-class-even類似 ng-class，但只在偶數(shù)行起作用；ng-class-odd 類似 ng-class，但只在奇數(shù)行起作用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<style>
.stripedeven {
  color:white;
  background-color:cyan;
}
.stripedodd{
 color:white;
  background-color:yellowgreen;
}
</style>
</head>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1px">
<tr>
 <th>Name</th>
 <th>Country</th>
</tr>
<tr ng-repeat="x in records" ng-class-even="'stripedeven'" ng-class-odd="'stripedodd'">
 <td>{{x.Name}}</td>
 <td>{{x.Country}}</td> 
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.records = [
  {
   "Name" : "Alfreds Futterkiste",
   "Country" : "Germany"
  },
  {
   "Name" : "Berglunds snabbk",
   "Country" : "Sweden"
  },
  {
   "Name" : "Centro comercial Moctezuma",
   "Country" : "Mexico"
  },
  {
   "Name" : "Ernst Handel",
   "Country" : "Austria"
  }
 ]
});
</script>
</body>
</html>

（3）、ng-if如果條件為 false 移除 HTML 元素

ng-if 指令用于在表達(dá)式為 false 時(shí)移除 HTML 元素。如果 if 語句執(zhí)行的結(jié)果為 true，會添加移除元素，并顯示。ng-if 指令不同于 ng-hide， ng-hide 隱藏元素，而 ng-if 是從 DOM 中移除元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="" ng-init="myVar = true">
<h3>保留 HTML: <input type="checkbox" ng-model="myVar" ></h3>
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>
<p>當(dāng)復(fù)選框取消選中時(shí) DIV 元素將移除。</p>
<p>當(dāng)重新選中復(fù)選框，DIV 元素會重新顯示。</p>
</body>
</html>

（4）、ng-checked規(guī)定元素是否被選中

ng-checked 指令用于設(shè)置復(fù)選框(checkbox)或單選按鈕(radio)的 checked 屬性。如果 ng-checked 屬性返回 true，復(fù)選框(checkbox)或單選按鈕(radio)將會被選中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="">
  <h3>My cars:</h3>
  <input type="checkbox" ng-model="all"> Check all<br>
  <input type="checkbox" ng-checked="all">Volvo<br>
  <input type="checkbox" ng-checked="all">Ford<br>
  <input type="checkbox" ng-checked="all">Mercedes
  <h3>點(diǎn)擊 "Check all" 選擇所有的車。</h3>
</body>
</html>

3、使用 CSS 動畫

我們可以使用 CSS transition(過渡) 或 CSS 動畫讓 HTML 元素產(chǎn)生動畫效果。

（1）、CSS 過渡

CSS 過渡可以讓我們平滑的將一個(gè) CSS 屬性值修改為另外一個(gè)：在 DIV 元素設(shè)置了 .ng-hide 類時(shí)，過渡需要花費(fèi) 0.5 秒，高度從 100px 變?yōu)?0。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<style>
div {
 transition: all linear 0.5s;
 background-color: lightblue;
 height: 100px;
}
.ng-hide {
 height: 0;
}
</style>
</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>

（2）、CSS 動畫

CSS 動畫允許你平滑的修改 CSS 屬性值:在 DIV 元素設(shè)置了 .ng-hide 類時(shí), myChange 動畫將執(zhí)行，它會平滑的將高度從 100px 變?yōu)?0。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<style>
@keyframes myChange {
 from {
   height: 100px;
 } to {
   height: 10;
 }
}
div {
 height: 100px;
 background-color: lightblue;
}
div.ng-hide {
 animation: 10s myChange;
}
</style>
</head>
<body ng-app="ngAnimate">
隱藏 DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck">
</div>
</body>
</html>

總結(jié)

以上就是關(guān)于AngularJS動畫的全部內(nèi)容，本文總結(jié)的很詳細(xì)，并提供了實(shí)例代碼，希望對學(xué)些AngularJS的大家有所幫助

您可能感興趣的文章: