本节中，我们将使用ngAnimate来实现图片切换的眩目效果。
和使用其它的模块一样，我们首先需要下载并引用这个库。
# 下载
~~~
panjiedeMacBook-Pro:angularjs panjie$ bower install angular-animate#1.5.7 --save
bower cached https://github.com/angular/bower-angular.git#1.5.7
bower validate 1.5.7 against https://github.com/angular/bower-angular.git#1.5.7
bower cached https://github.com/angular/bower-angular-animate.git#1.5.7
bower validate 1.5.7 against https://github.com/angular/bower-angular-animate.git#1.5.7
bower install angular-animate#1.5.7
bower install angular#1.5.7
angular-animate#1.5.7 bower_components/angular-animate
└── angular#1.5.7
angular#1.5.7 bower_components/angular
~~~
# 引用
`index.html`
~~~
<script src="bower_components/angular-animate/angular-animate.js"></script>
~~~
# 依赖注入
`app.module.js`
~~~
// 定义模块
var phonecatApp = angular.module('phonecatApp', ['yunZhi', 'ngRoute', 'core', 'ngAnimate']);
~~~
# 测试
网络无错误，说明正确的进行引用。
# 引入CSS文件
animate是与CSS协同工作的。CSS的样子大概是这个样子:
~~~
.phone-list-item.ng-enter,
.phone-list-item.ng-leave,
.phone-list-item.ng-move {
transition: 0.5s linear all;
}
.phone-list-item.ng-enter,
.phone-list-item.ng-move {
height: 0;
opacity: 0;
overflow: hidden;
}
.phone-list-item.ng-enter.ng-enter-active,
.phone-list-item.ng-move.ng-move-active {
height: 120px;
opacity: 1;
}
.phone-list-item.ng-leave {
opacity: 1;
overflow: hidden;
}
.phone-list-item.ng-leave.ng-leave-active {
height: 0;
opacity: 0;
padding-bottom: 0;
padding-top: 0;
}
~~~
我们当然可以自己写，也可以直接使用大牛们为我们准备好的。
# 下载CSS包
在网络上，这种资源有很多，当然还有封装的更完美的，比如说ng-fx。但这，我们只需要这种只有CSS的。
> http://augus.github.io/ngAnimate/
> http://theoinglis.github.io/ngAnimate.css/#/
都是angularjs下的优秀的动画库，貌似第一个更知名一些，不过在本节中我们使用第二种。
右键查看其链接地址，然后使用bower安装
~~~
panjiedeMacBook-Pro:angularjs panjie$ bower install https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css --save
bower not-cached https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css#*
bower resolve https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css#*
bower download https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css
bower resolved https://raw.githubusercontent.com/theoinglis/ngAnimate.css/master/build/nga.all.min.css#e-tag:cd5969157
bower install nga.all.min#e-tag:cd5969157
nga.all.min#e-tag:cd5969157 bower_components/nga.all.min
~~~
# 引用CSS
`index.html`
~~~
+ <link rel="stylesheet" href="bower_components/nga.all.min/index.css">
~~~
# 增加CSS属性
查看一个效果，并复制class的值
将class的值，添加到我们想让产生做用的地方。
`yun-zhi/phone-list.component.js`
~~~
- <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
+ <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail nga-default nga-stagger nga-rotate-up">
~~~
测试：
在变形中截图如下：
## 自定义幻灯片
下面，我们在将效果添加到手机详情表的手机大图切换中。大多的幻灯片，都基于如下原理：
> 在后台存放N张幻灯片，然后只显示当前的图片。
我们也不例外：
`yun-zhi/phone-detail.template.html`
~~~
<div class="col-md-4">
_ <img ng-src="{{$ctrl.mainImageUrl}}" class="phone img-responsive img-rounded" />
+ <img ng-repeat="img in $ctrl.phone.images" ng-src="{{img}}" ng-show="img === $ctrl.mainImageUrl" class="img-responsive img-rounded" />
</div>
~~~
> ng-show，决定了什么情况下显示这个元素。
这样，我们在幻灯片模块下，一起载入了多张图片，但却只显示当前的图片。
然后我们需要和前面一样，加入CSS以实现动画。在此，我们需要选择
至于原因，大家可以一个个的效果试一下。
`yun-zhi/phone-detail.template.html`
~~~
<img ng-repeat="img in $ctrl.phone.images" ng-src="{{img}}" ng-show="img === $ctrl.mainImageUrl" class="img-responsive img-rounded nga-default nga-stagger nga-squash-right" />
~~~
切换时的样子：
最终我们实现了加入动画的效果。
官方教程中，自定义了CSS，还利用animate()创建了自己的动动画效果。但做为入门教程而言，涉及的知识面较广，内容较深。在此，不做深入学习。
其实在github中，我们还可以找到另外一替代方案，比如：ng-fx。
> https://github.com/AngularClass/ng-fx
`yun-zhi/phone-detail.template.html`
~~~
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img ng-repeat="img in $ctrl.phone.images" ng-src="{{img}}" ng-show="img === $ctrl.mainImageUrl" class="img-responsive img-rounded nga-default nga-stagger nga-squash-right" />
</div>
<div class="col-md-8">
<h1>{{$ctrl.phone.name}}</h1>
<p>{{$ctrl.phone.description}}</p>
<div class="row">
<div class="col-md-2" ng-repeat="img in $ctrl.phone.images">
<img ng-click="$ctrl.setImage(img)" ng-src="{{img}}" class="img-thumbnail" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Availability and Networks</h4>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in $ctrl.phone.availability">{{availability}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Battery</h4>
<dl>
<dt>Type</dt>
<dd>{{$ctrl.phone.battery.type}}</dd>
<dt>Talk Time</dt>
<dd>{{$ctrl.phone.battery.talkTime}}</dd>
<dt>Standby time (max)</dt>
<dd>{{$ctrl.phone.battery.standbyTime}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Storage and Memory</h4>
<dl>
<dt>RAM</dt>
<dd>{{$ctrl.phone.storage.ram}}</dd>
<dt>Internal Storage</dt>
<dd>{{$ctrl.phone.storage.flash}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Connectivity</h4>
<dl>
<dt>Network Support</dt>
<dd>{{$ctrl.phone.connectivity.cell}}</dd>
<dt>WiFi</dt>
<dd>{{$ctrl.phone.connectivity.wifi}}</dd>
<dt>Bluetooth</dt>
<dd>{{$ctrl.phone.connectivity.bluetooth}}</dd>
<dt>Infrared</dt>
<dd ng-bind-html="$ctrl.phone.connectivity.infrared | checkmark"></dd>
<dt>GPS</dt>
<dd ng-bind-html="$ctrl.phone.connectivity.gps | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Android</h4>
<dl>
<dt>OS Version</dt>
<dd>{{$ctrl.phone.android.os}}</dd>
<dt>UI</dt>
<dd>{{$ctrl.phone.android.ui}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Size and Weight</h4>
<dl>
<dt>Dimensions</dt>
<dd ng-repeat="dim in $ctrl.phone.sizeAndWeight.dimensions">{{dim}}</dd>
<dt>Weight</dt>
<dd>{{$ctrl.phone.sizeAndWeight.weight}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Display</h4>
<dl>
<dt>Screen size</dt>
<dd>{{$ctrl.phone.display.screenSize}}</dd>
<dt>Screen resolution</dt>
<dd>{{$ctrl.phone.display.screenResolution}}</dd>
<dt>Touch screen</dt>
<dd ng-bind-html="$ctrl.phone.display.touchScreen | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Hardware</h4>
<dl>
<dt>CPU</dt>
<dd>{{$ctrl.phone.hardware.cpu}}</dd>
<dt>USB</dt>
<dd>{{$ctrl.phone.hardware.usb}}</dd>
<dt>Audio / headphone jack</dt>
<dd>{{$ctrl.phone.hardware.audioJack}}</dd>
<dt>FM Radio</dt>
<dd ng-bind-html="$ctrl.phone.hardware.fmRadio | checkmark"></dd>
<dt>Accelerometer</dt>
<dd ng-bind-html="$ctrl.phone.hardware.accelerometer | checkmark"></dd>
</dl>
</div>
<div class="col-md-2">
<h4>Camera</h4>
<dl>
<dt>Primary</dt>
<dd>{{$ctrl.phone.camera.primary}}</dd>
<dt>Features</dt>
<dd>{{$ctrl.phone.camera.features.join(', ')}}</dd>
</dl>
</div>
<div class="col-md-2">
<h4>Additional Features</h4>
<dd>{{$ctrl.phone.additionalFeatures}}</dd>
</div>
</div>
</div>
~~~
- 前言
- 第一章：准备知识
- 第一节：GIT
- 第二节：Node.js
- 第三节：http-server
- 第四节：bower
- 第五节：firefox+chrome
- 第二章：官方示例教程
- 第零节：Hello Yunzhier
- 第一节：静态模板
- 第二节：MVC
- 回调函数
- 第三节：组件
- 第四节：重构组件
- 2.4.1 调用组件
- 2.4.2 规划目录结构
- 2.4.3 剥离V层
- 2.4.4 大话测试
- 第五节：循环过滤器
- 第六节：双向数据绑定
- 第七节：XHR与依赖注入
- 第八节：添加缩略图
- 第九节：模拟页面跳转
- 2.9.1 使用bower
- 2.9.2 使用grunt
- 第十节：完善手机详情页
- 第十一节：自定义过滤器
- 第十二节：行为处理
- 第十三节：封装请求
- 第十四节：应用动画
- 第十五节：总结
- 第三章：菜谱管理示例
- 第四章：总结