學習筆記-AngularJs（九）

時間 2019-11-29

原文原文鏈接

到目前爲止，咱們所作的學習案例都是沒有加任何動畫效果的，對於以往來講，咱們常常會去使用一些動畫插件或是css框架（如：animate.css）來點綴咱們的網頁，這樣顯得生動，高大上，那麼接下來咱們能夠學習一下，怎麼在AngularJs下來實現叼酷炫的動畫操做，主要使用的命令是ngAnimate。javascript

與以前的ngResource，ngRoute同樣，須要注入ngAnimate和引入ng-animate.js纔可使用此服務，想在你的angular應用程序使用ngAnimate來實現動畫功能，前提條件是將ngAnimate包含到您的應用程序，動畫是由使用CSS轉換/動畫或JavaScript回調來實現。angular自己各類核心ng指令將提供動畫鉤子，支持動畫的的指令有ngRepeat, ngInclude, ngIf, ngSwitch,ngShow, ngHide, ngView and ngClass，固然自定義命令也是能夠經過使用$animate服務來進行動畫操做，其各個指令對動畫支持狀況以下表（忽略，http://t.cn/RUbL4rP）：css

ng-enter class 主要用於新添加的元素並渲染到頁面中，添加後會添加class ng-enter-active
ng-move class 主要用於當元素被移動時，移動後會添加class ng-move-active
ng-leave class主要用於被刪除時，刪除後會添加class ng-leave-active
ng-hide,ng-show class用因而否判斷執行，對應的還會有幾個css，ng-hide-add,ng-hide-add-active,ng-hide-remove,ng-hide-remove-active,會在使用ng-show或是ng-hide指令操做dom時動態添加的class
對於表單，在以前的學習筆記上也有經過不一樣驗證的屬性，而獲得的class（如input無效則會加上class="ng-invalid"），從而來定義其顯示樣式

　　必需要明白：（1）父元素動畫沒執行完，子元素動畫不執行，可是能夠將此行爲屏蔽掉，加上ng-animate-children 　html

　　　　　　　　（2）在使用$http獲取遠程數據時，會自動延長動畫時間，應用加載，動畫不立刻執行！java

　　經過審查phonecat上面（http://angular.github.io/angular-phonecat/step-12/app/#/phones）的元素，觀察其變化，不難看出，AngularJs能夠經過ngAnimate模塊在不一樣時間點給上不一樣的class，而後經過定義這些class的css，來實現動畫操做！以爲仍是須要舉例子來學習，比較容易懂！主要分兩部分來舉例，CSS-defined Animations和JavaScript-defined Animations。jquery

CSS-defined Animationsgit

還記得以前的學習筆記-AngularJs（三）使用了filter對ng-repeat進行過濾嗎？咱們如今修改一下以前的代碼，把它改爲過濾檢索歌曲，代碼以下：github

<!doctype html>
<html ng-app='animate-css'>
    <head>
        <meta charset="utf8"/>
        <script src="angular.min.js"></script>
        <script src="angular-animate.js"></script> //使用ngAnimate模塊須要引入angular-animate.js
        <script>
            angular.module('animate-css', ['ngAnimate'])//注入ngAnimate，這樣animate動畫效果便自動應用在了項目中，因而就須要定義css改變樣式
            .controller('songController', ['$scope', function($scope) {
                $scope.songs=['愛你一萬年','開心的馬騮','北京歡迎你','笑傲江湖' ,'練習','愛情買賣','七里香' ,'死了都要愛','北京愛情故事','星星點燈','星空','豆漿和油條','神話'];
            }]);
       </script>
        
        <style>
　　　　　　　/*上文已有提到，angular不一樣時間點會有不一樣的class，正是利用這些class來製做動畫，必須瞭解ng-enter,ng-enter-active,ng-leave,ng-leave-active,ng-move,ng-move-active這些class的前後順序*/

            li{list-style: none; }
            body{margin: 50px; background-color: #333; color: #ccc; overflow: hidden;}
            h3{color: #fff;}
            .song-list.ng-enter,
            .song-list.ng-leave,
            .song-list.ng-move {
              -webkit-transition: 0.5s linear all;
              -moz-transition: 0.5s linear all;
              -o-transition: 0.5s linear all;
              transition: 0.5s linear all;
            }

            .song-list.ng-enter,
            .song-list.ng-move {
              opacity: 0;
              height: 0;
              overflow: hidden;
            }

            .song-list.ng-move.ng-move-active,
            .song-list.ng-enter.ng-enter-active {
              opacity: 1;
              height: 120px;
            }

            .song-list.ng-leave {
              opacity: 1;
              overflow: hidden;
            }

            .song-list.ng-leave.ng-leave-active {
              opacity: 0;
              height: 0;
              padding-top: 0;
              padding-bottom: 0;
            }        
        </style>
    </head>
    <body>    
        
        <div ng-controller="songController">
            <input type="text" ng-model="search">
            <button type="submit">Filter</button>
            <ul>
            <li class="song-list" ng-repeat="song in songs | filter:search">
            {{song}}
            </li> 
            </ul>                 
        </div>
    </body>
</html>

JavaScript-defined Animationsweb

若是你不想使用CSS3轉換或CSS3動畫，若是你想提供動畫還不支持CSS的瀏覽器轉換/動畫,那麼你可使用JavaScript動畫定義AngularJS模塊內，也就是自定義動畫，實現個性化的動畫效果，先來看官網是如何去使用javascript動畫定義的：瀏覽器

//!annotate="YourApp" Your AngularJS Module|Replace this or ngModule with the module that you used to define your application.
var ngModule = angular.module('YourApp', ['ngAnimate']);
ngModule.animation('.my-crazy-animation', function() {
  return {
    enter: function(element, done) {
      //run the animation here and call done when the animation is complete
      return function(cancelled) {
        //this (optional) function will be called when the animation
        //completes or when the animation is cancelled (the cancelled
        //flag will be set to true if cancelled).
      };
    },
    leave: function(element, done) { },
    move: function(element, done) { },

    //animation that can be triggered before the class is added
    beforeAddClass: function(element, className, done) { },

    //animation that can be triggered after the class is added
    addClass: function(element, className, done) { },

    //animation that can be triggered before the class is removed
    beforeRemoveClass: function(element, className, done) { },

    //animation that can be triggered after the class is removed
    removeClass: function(element, className, done) { }
  };
});

不難看出是能夠不只本身定義enter（添加元素）、move（移動元素）、leave（刪除元素）等狀態，並且還能夠增長addClass、beforeRemoveClass、removeClass等監聽事件。那麼咱們對上面過濾歌名的demo修改一下：app

<!doctype html>
<html ng-app='animate-javascript'>
    <head>
        <meta charset="utf8"/>
        <script src="jquery.js"></script>
        <script src="angular.min.js"></script>
        <script src="angular-animate.js"></script>
        <script>
            var jav = angular.module('animate-javascript', ['ngAnimate']);
            jav.controller('songController', ['$scope', function($scope) {
                $scope.songs=['愛你一萬年','開心的馬騮','北京歡迎你','笑傲江湖' ,'練習','愛情買賣','七里香' ,'死了都要愛','北京愛情故事','星星點燈','星空','豆漿和油條','神話'];
            }]);
            jav.animation(".repeat-animation",function(){  //咱們引入angular-animate.js和注入ngAnimate模塊後，即可以使用.animation(element,function(){...})來定義動畫,這裏咱們定義了一個class爲.repeat-animation的的動畫 return {
                    enter : function(element, done) { //對於動畫行爲的函數格式是function(element,done){...}，這裏的element指得是一個jquery對象（前提必須引入jquery.js）,done是結束的回調函數 var width = element.width();
                      element.css({
                        position: 'relative',
                        left: -20,
                        opacity: 0
                      });
                      element.animate({
                        left: 0,
                        opacity: 1
                      }, done);
                    },
                    leave : function(element, done) {
                      element.css({
                        position: 'relative',
                        left: 0,
                        opacity: 1
                      });
                      element.animate({
                        left: -10,
                        opacity: 0
                      }, done);
                    },
                    move : function(element, done) {
                      element.css({
                        left: "5px",
                        opacity: 0.2
                      });
                      element.animate({
                        left: "0px",
                        opacity: 1
                      }, done);
                    }
                  };
            })
        </script>
        
        <style>
            li{list-style: none; }
            body{margin: 50px; background-color: #333; color: #ccc; overflow: hidden;}
            h3{color: #fff;}
        </style>
    </head>
    <body>    
        
        <div ng-controller="songController">
            <input type="text" ng-model="search">
            <button type="submit">Filter</button>
            <ul>
            <li class="song-list repeat-animation" ng-repeat="song in songs | filter:search">
            {{song}}
            </li> 
            </ul>                 
        </div>
    </body>
</html>

這是對ng-animate的一個大概的瞭解，其中還有許多遺漏的點（好比說$animate服務等），隨後學到了，會補充上去，其餘指令的自定義動畫(經過css或是javascript)的代碼demo更新到github上(地址：https://github.com/xiaobin5201314/AngularJS-Learning/tree/master/block-example/動畫操做-12)！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。