AngularJS 動畫總結

對讀過的幾篇文章的總結，儘可能保證邏輯性，不斷補充、精簡、更正。
後面會列出參考文章地址，方便之後取用。感謝各位做者以及翻譯者。css

AngularJS 動畫思考

1、如何使用

在angular中咱們使用 ngAnimate 添加過渡和動畫效果。html

經過一個爲 ng-view 添加動畫效果的例子來演示使用方法css3

1）咱們須要構建什麼

使用 ngRoute 來爲咱們的頁面路由nginx
使用 ngAnimate 來爲頁面建立動畫效果angularjs
對頁面使用 CSS Animationsweb
當咱們離開或進入試圖時，咱們的每個頁面會有不一樣的動畫效果ajax

2）如何讓它工做

ngAnimate 會根據是進入仍是離開視圖來爲不一樣的Angular 指令(directive)添加和移除不一樣的CSS類名。例如，當咱們加載網站時，不管ng-view中填充了什麼都會獲得一個.ng-enter的類名。apache

咱們所須要作的就是給.ng-enter 類名添加CSS動畫效果，該動畫在進入的時候會自動生效。bootstrap

ngAnimate 能夠應用於: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView 以及 ngClassapi

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

2、進階

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裏按鈕的存在或者顯示對標題字數的影響。