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>
還需在應(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)綁定一個或多個 CSS 類。ng-class 指令的值可以是字符串，對象，或一個數(shù)組。如果是字符串，多個類名使用空格分隔。如果是對象，需要使用 key-value 對，key 是一個布爾值，value 為你想要添加的類名。只有在 key 為 true 時類才會被添加。如果是數(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>選擇一個類:</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 指令用于在表達式為 false 時移除 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>當復(fù)選框取消選中時 DIV 元素將移除。</p> <p>當重新選中復(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>點擊 "Check all" 選擇所有的車。</h3> </body> </html>
3、使用 CSS 動畫
我們可以使用 CSS transition(過渡) 或 CSS 動畫讓 HTML 元素產(chǎn)生動畫效果。
（1）、CSS 過渡
CSS 過渡可以讓我們平滑的將一個 CSS 屬性值修改為另外一個：在 DIV 元素設(shè)置了 .ng-hide 類時，過渡需要花費 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 類時, 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é)的很詳細，并提供了實例代碼，希望對學(xué)些AngularJS的大家有所幫助
相關(guān)文章
AngularJs bootstrap搭載前臺框架——準備工作
本文主要介紹AngularJs bootstrap搭載前臺框架，這里對Bootstrap 搭載環(huán)境，及注意事項做了講解，有需要的小伙伴可以參考下2016-09-09
AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法
在AngularJS中，有時候需要監(jiān)視Scope中的某個變量，因為變量的改變會影響一些界面元素的顯示，接下來通過本文給大家介紹AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法，需要的朋友參考下吧2016-01-01
使用Angular CLI快速創(chuàng)建Angular項目的一些基本概念和寫法小結(jié)
這篇文章主要介紹了使用Angular CLI快速創(chuàng)建Angular項目的一些基本概念和寫法小結(jié),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
利用Angularjs和原生JS分別實現(xiàn)動態(tài)效果的輸入框
現(xiàn)在的很多網(wǎng)站都將輸入框做成了動態(tài)的效果，這樣對于用戶體檢來說非常好，這篇文章分別用Angularjs和原生JS兩種方法來實現(xiàn)動態(tài)效果的輸入框，具有一定的參考價值，有需要的小伙伴們可以來參考借鑒。2016-09-09
AngularJS實現(xiàn)表格的增刪改查（僅限前端）
這篇文章主要介紹了AngularJS實現(xiàn)表格的增刪改查，僅限前端，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要為大家詳細介紹了angularjs實現(xiàn)猜大小功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)
這篇文章主要介紹了詳解在Angularjs中ui-sref和$state.go如何傳遞參數(shù)，詳細的介紹了ui-sref和$state.go的區(qū)別和如何傳參，有興趣的可以了解下2017-04-04
本篇文章主要介紹了AngularJS之$window窗口對象，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本篇文章主要介紹了詳解angularjs利用ui-route異步加載組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
當Angular項目的規(guī)模到達一定的程度，就需要進行測試工作了。為什么要自動化測試？1，提高產(chǎn)出質(zhì)量。2，減少重構(gòu)時的痛。反正我最近重構(gòu)多了，痛苦經(jīng)歷多了。3，便于新人接手。下面這篇文章就給大家詳細介紹了Angular.Js的自動化測試，有需要的朋友們可以參考借鑒。2016-12-12