AngularJS学学笔记-AngularJs(九)

到近来停止,大家所做的上学案例都以尚未加其他动画效果的,对于过去以来,大家常常会去采纳部分动画片插件或是css框架(如:animate.css)来装点大家的网页,那样显得活泼,高大上,那么接下去大家得以学学一下,怎么在AngularJs下来贯彻叼酷炫的动画操作,主要利用的一声令下是AngularJS,ngAnimate。

与后面包车型大巴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):

AngularJS 1

  • 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   

        (2)在动用$http获取远程数据时,会自行延长动画时间,应用加载,动画不立刻执行!

  通过查对phonecat上边(http://angular.github.io/angular-phonecat/step-12/app/#/phones)的因素,观望其生成,简单看出,AngularJs能够由此ngAnimate模块在分歧时间点给上差其余class,然后经过定义那么些class的css,来兑现动画操作!觉得依旧供给举例子来学学,相比较便于懂!重要分两片段来比喻,CSS-defined
Animations和JavaScript-defined Animations。

CSS-defined Animations

还记得此前的读书笔记-AngularJs(三)运用了filter对ng-repeat举办过滤吗?大家明日涂改一下事先的代码,把它改成过滤检索歌曲,代码如下:

<!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 Animations

 即便您不想接纳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修改一下:

<!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/xiaobin5二零一二14/AngularJS-Learning/tree/master/block-example/动画操作-12)!

相关文章