AngularJS 动画总结

对读过的几篇文章的总结，尽量保证逻辑性，不断补充、精简、更正。
后面会列出参考文章地址，方便以后取用。感谢各位作者以及翻译者。

AngularJS 动画思考

一、如何使用

在angular中我们使用 ngAnimate 添加过渡和动画效果。

通过一个为 ng-view 添加动画效果的例子来演示使用方法

1）我们需要构建什么

使用 ngRoute 来为我们的页面路由
使用 ngAnimate 来为页面创建动画效果
对页面使用 CSS Animations
当我们离开或进入试图时，我们的每一个页面会有不同的动画效果

2）如何让它工作

ngAnimate 会根据是进入还是离开视图来为不同的Angular 指令(directive)添加和移除不同的CSS类名。例如，当我们加载网站时，无论ng-view中填充了什么都会得到一个.ng-enter的类名。

我们所需要做的就是给.ng-enter 类名添加CSS动画效果，该动画在进入的时候会自动生效。

ngAnimate 可以应用于: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClass

3）开始我们的程序

(1) 文件结构，如下

- index.html
- style.css
- app.js
- page-home.html
- page-about.html
- page-contact.html

(2) index.html :

加载 AngularJS, ngRoute 以及 ngAnimate。用 bootstrap.css 来定义样式。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>

    <!-- CSS -->
    <!-- load bootstrap (bootswatch version) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    
    <!-- JS -->
    <!-- load angular, ngRoute, ngAnimate -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
    <script src="app.js"></script>

</head>

<!-- apply our angular app -->
<body ng-app="animateApp">

    <!-- inject our views using ng-view -->
    <!-- each angular controller applies a different class here -->
    <div class="page {{ pageClass }}" ng-view></div>
        
</body>
</html>

(3) Angular 程序 app.js:

创建程序、路由以及控制器。

// app.js

// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);

// ROUTING ===============================================
// set our routing for this application
// each route will pull in a different controller
animateApp.config(function($routeProvider) {

    $routeProvider

        // home page
        .when('/', {
            templateUrl: 'page-home.html',
            controller: 'mainController'
        })

        // about page
        .when('/about', {
            templateUrl: 'page-about.html',
            controller: 'aboutController'
        })

        // contact page
        .when('/contact', {
            templateUrl: 'page-contact.html',
            controller: 'contactController'
        });

});


// CONTROLLERS ============================================
// home page controller
animateApp.controller('mainController', function($scope) {
    $scope.pageClass = 'page-home';
});

// about page controller
animateApp.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
});

// contact page controller
animateApp.controller('contactController', function($scope) {
    $scope.pageClass = 'page-contact';
});

(4) 视图 page-home.html, page-about.html, page-contact.html:

为每个页面准备一些文字以及链到其他页面的链接地址。

<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>

<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>

<!-- page-contact.html -->
<h1>Tons of Animations</h1> 
<h2>Contact</h2>

<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>

(5) 为App添加动画效果 style.css:

ngAnimate为我们的ng-view添加的两个类分别是.ng-enter和.ng-leave

CSS动画

/* ANIMATIONS
============================================================================= */

/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
    0%         { transform: rotateZ(0deg); }
    20%     { transform: rotateZ(10deg); animation-timing-function: ease-out; }
    40%     { transform: rotateZ(17deg); }
    60%     { transform: rotateZ(16deg); }
    100%     { transform: translateY(100%) rotateZ(17deg); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
    to         { transform: translateX(-100%); }
}

/* rotate out newspaper */
@keyframes rotateOutNewspaper {
    to         { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

/* entering animations --------------------------------------- */
/* scale up */
@keyframes scaleUp {
    from     { opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
    from     { transform:translateX(100%); }
    to         { transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
    from     { transform:translateY(100%); }
    to         { transform: translateY(0); }
}

进入和离开动画效果

我们只需要将这些动画效果应用给.ng-enter 或 .ng-leave就可以为我们的页面添加不用的动画效果。

/* style.css */
...

    .ng-enter             { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
    .ng-leave             { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }

...

具体页面的动画效果

...

    .ng-enter         { z-index: 8888; }
    .ng-leave         { z-index: 9999; }

    /* page specific animations ------------------------ */

    /* home -------------------------- */
    .page-home.ng-enter         { animation: scaleUp 0.5s both ease-in; }
    .page-home.ng-leave         { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }

    /* about ------------------------ */
    .page-about.ng-enter         { animation:slideInRight 0.5s both ease-in; }
    .page-about.ng-leave        { animation:slideOutLeft 0.5s both ease-in; }

    /* contact ---------------------- */
    .page-contact.ng-leave      { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
    .page-contact.ng-enter         { animation:slideInUp 0.5s both ease-in; }

...

（6）预览地址：

http://plnkr.co/edit/uW4v9T?p=info

二、进阶

1）其他类 `class`

ng-enter-active、ng-leave-active

对于 ng-repeat 主要是对一个list的展示，这些元素是是被创建出来加入到DOM结构中去的，那么，它的动画过程为

创建元素 -> .ng-enter -> .ng-enter-active -> 完成，呈默认状态
默认状态 -> .ng-leave -> .ng-leave-active -> 销毁元素

可以通过设置.ng-enter(.ng-leave) 和 .ng-enter-active(.ng-leave-active) 的样式，加上css3的动画来显示出动画，如：

<!-- HTML片段 -->
<div ng-init="users = [1,2,3,4,5]"></div>
<input class="filter-btn" type="search" ng-model="u" placeholder="search item" aria-label="search item" />
<ul>
<li class="item" ng-repeat="user in users | filter: u as result">
  {{user}}
</li>
</ul>

/* css片断 */
/*ng-repeat的元素*/

.item{
  -webkit-transition: all linear 1s;
  -o-transition: all linear 1s;
  transition: all linear 1s;
}
/*动画开始前*/
.item.ng-enter{
  opacity:0;
}
/*动画过程*/
.item-ng-enter-active{
  opacity:1;
}

ng-enter-stagger

上面的效果是对所有元素同时应用，可能实际运用中需要有一个先后的渐变出现的效果，这时候可以设置ng-enter-stagger来实现.
```
/*不同时出现*/
.item.ng-enter-stagger {
    transition-delay:0.5s;
    transition-duration:0;
}
```
ng-enter-prepare

这是一个特殊的类，可以在实际的动画开始之前防止不必要的闪烁的内容。
```
<div ng-class="{red: myProp}">
 <div ng-class="{blue: myProp}">
  <div class="message" ng-if="myProp"></div>
 </div>
</div>
```
可能在输入动画期间，.message div将在开始动画化之前被短暂地看到。
在这种情况下，可以向CSS添加下面的样式，以确保在动画启动前元素保持隐藏
```
.message.ng-enter-prepare {
  opacity: 0;
}
```
ng-animate-ref

通过使用名为ng-animate-ref的属性配对元素,来跨应用程序的结构区域（如视图）之间交叉动画元素的功能。
tips：自己理解为，跨页面的配对元素之间的过渡效果
官方例子：https://plnkr.co/edit/?p=preview

2）注意事项

使用 ng-hide 时需加上

.ng-hide-add,.ng-hide-remove{ 
display: block!important; 
}

防止瞬间隐藏

关于ng-show、ng-hide、ng-if的区别（有机会单独写一篇总结）。

简单地说：
ng-if：元素存在不存在。
ng-show、ng-hide：元素显示不显示(本身是存在的)。

比如：列表最后一行元素的下边框隐藏，ng-show、ng-hide会出问题。
```
li：last-child{
border-bottom：none；
}
```
又比如：ionic的header里按钮的存在或者显示对标题字数的影响。