AngularJS1.X学学笔记14-动画(解读文档)

  如今在看算法分析,那么些大O啊,小o啊,分治法啊(如今就看出此间),真是搞死了。那回呢休息一下,学学AngularJS动画,上一篇小说依照随便男子的书简单谈到了动画片的话题,发现感应很大(好呢,小编说慌了,那篇文章的动画谈得太简单了),前日来看看官方文档。嗯,边看边写。

一、安装

  那一个应该都知晓了,和任何的扩张模块安装相同。那里为了作品完整性不难提一下。文档给到了拿到动画扩大angular-animate.js的有余主意。

  一 、cdn,自身去查

  2、npm install --save angular-animate@X.Y.Z   

  3、bower install angular-animate#X.Y.Z

  得到那一个文件后要求引入到大家要利用动画的页面,添加正视ngAnimate。

二、使用

  动画的使用方法有二种,一是CSS,二是经过javascript。前者是经过纯粹的css来兑现动画,后者通过脚本触发动画。两者都亟待运用Angrular提供的片段非同平日的类。

  ① 、扶助动画的命令

  图片 1

  最终八个指令属于二个恢弘模块ngMessages,为了集中火力搞动画,先不管。

  2、基于CSS的动画

  CSS动画的特殊性在于你不须求写一行javascript就足以制造出炫酷的动画,那让本人想开了Bootstrap,她只要在html成分上添加一些一定的质量就可以完成部分动画片。Angularjs基于CSS完结动画的规律很简短,即,假设你为有些指令加上了有的类比如fade,而你在样式表中那样写.fade.ng-leave,那样只要成分没有ng-leave这么些类,你加的fade的样式就不会被应用,不过Angularjs会监视我们的吩咐,当检测到指令进入某种情状时就会助长相应的类,从而你的样式就会被接纳了,如此,动画就接触了。上面给个例子

  

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>animate</title>
    <style type="text/css">
        #div{
            width: 300px;
            height: 300px;
            background:red;
        }
        .ani.ng-hide{
            transition: 6s linear all;
            opacity: 0;
            background: blue;
        }
    </style>
</head>
<body>
    <div ng-controller='animateCtrl'>
        <div id="div" class="ani" ng-show='show'></div>
        <button ng-click='clickHandler()'>change</button>
    </div>


    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="../node_modules/angular-animate/angular-animate.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module("myApp",['ngAnimate']);
        myApp.controller("animateCtrl",function($scope){
            $scope.show = true;
            $scope.clickHandler = function(){
                $scope.show = !$scope.show;
            }
        })
    </script>
</body>
</html>

  大家看一下当单击按钮隐藏时发生了什么样。

图片 2

  看到没,angular给大家动态添加了过多类,正是因为那样,大家的卡通样式才能被选取。

  有始发有甘休

/* The starting CSS styles for the enter animation */
.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

 

  angularjs对动画成分的情事举办了保管,可以标识状态的上马如ng-enter
和景色的终结
ng-enter-active.大家得以在情景开头内定动画的初阶状态,状态的了断指定动画的末段状态。

  其余,angular提供了友好加类的机制。

  

<div ng-class="{on:onOff}" class="highlight">
  Highlight this box
</div>
<button ng-click="onOff=!onOff">Toggle</button>

<style>
.highlight {
  transition:0.5s linear all;
}
.highlight.on-add {
  background:white;
}
.highlight.on {
  background:yellow;
}
.highlight.on-remove {
  background:black;
}
</style>

 

  那一个事例的意趣是,即使onOff为真,那么给成分加上on那么些类,在抬高的历程中会添加on-add类,当onOff为false是,会为成分添加2个on-remove,当然,这些on-remove只存在与由true变为false的进度。

  有时候我们意在进入有些状态后并不立即执行动画,而是延迟执行,你肯定想到了transition-delay恐怕animation-delay,ng也给我们提供了落实的措施。

  

.my-animation.ng-enter-stagger {
  /* this will have a 100ms delay between each successive leave animation */
  transition-delay: 0.1s;

  /* As of 1.4.4, this must always be set: it signals ngAnimate
    to not accidentally inherit a delay property from another CSS class */
  transition-duration: 0s;

  /* if you are using animations instead of transitions you should configure as follows:
    animation-delay: 0.1s;
    animation-duration: 0s; */
}

 

  就如这一个样子,给我们的动画类加上3个叫.ng-xx-stagger的东东。

  介绍五个状态,在动画伊始以前的状态,ng-xx-prepare,xx 可以是entermove, and leave。用法如下:

.message.ng-enter-prepare {
  opacity: 0;
}

 

  那一个可以给咱们的因素在未曾初始动画(可能叫即将起头吧)的景色下设置样式。

   3、基于javascript的动画

  ngAmination模块允许利用javascript使用其动画效果,格局与CSS类似,不一样的是它需求调二个模块的animation() 
方法,使用js的功利是大家可以用部分完美的js动画库来规划动画。

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="UTF-8">
    <title>animate3</title>
    <style type="text/css">
        #hh{
            width: 100px;
            height: 50px;
            background: red;
        }

    </style>
</head>
<body>
    <div ng-controller='animateCtrl'>
        <div id="hh" ng-if="bool" class="slide">
          大家好!
        </div>
        <button ng-click="handler()">点我</button>
    </div>

    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="../node_modules/angular-animate/angular-animate.min.js"></script>

    <script type="text/javascript">
        var myApp = angular.module("myApp",['ngAnimate']);
        myApp.controller("animateCtrl",function($scope){
            $scope.handler = function(){
                $scope.bool = !$scope.bool;
            }
        });

        myApp.animation('.slide', [function() {
          return {
            // make note that other events (like addClass/removeClass)
            // have different function input parameters
            enter: function(element, doneFn) {
              jQuery(element).fadeIn(1000, doneFn);

              // remember to call doneFn so that AngularJS
              // knows that the animation has concluded
            },

            leave: function(element, doneFn) {
              jQuery(element).fadeOut(10000, doneFn);
            }
          }
        }]);
    </script>
</body>
</html>

   不一致指令帮忙的卡通有分别,可以参见本文最前头的图,本例中用到了enter,和leave。

  肆 、基于css的主意和基于javascript的法门可以混用吗

  文档讲:倘若css方式和js方式拔取了一致的css类,那么css方式将无法干活。可是,大家可以通过js去让我们用css方式定义的卡通执行,那就须求三个新的劳动叫做$animateCss。

  

myModule.animation('.slide', ['$animateCss', function($animateCss) {
  return {
    enter: function(element) {
       // this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`.
      return $animateCss(element, {
        event: 'enter',
        structural: true
      });
    }
  }
}]);

 

   下文中对$animateCss举行详尽介绍,那里大致指示。

  5、锚动画

  

<!-- index.html -->
<div ng-view class="view-animation">
</div>

<!-- home.html -->
<a href="#/banner-page">
  <img src="./banner.jpg" class="banner" ng-animate-ref="banner">
</a>

<!-- banner-page.html -->
<img src="./banner.jpg" class="banner" ng-animate-ref="banner">

 

 

.banner.ng-anchor {
  /* this animation will last for 1 second since there are
         two phases to the animation (an `in` and an `out` phase) */
  transition:0.5s linear all;
}

.view-animation.ng-enter, .view-animation.ng-leave {
  transition:0.5s linear all;
  position:fixed;
  left:0;
  top:0;
  width:100%;
}
.view-animation.ng-enter {
  transform:translateX(100%);
}
.view-animation.ng-leave,
.view-animation.ng-enter.ng-enter-active {
  transform:translateX(0%);
}
.view-animation.ng-leave.ng-leave-active {
  transform:translateX(-100%);
}

 

  那里贴出文档的事例,ng-animate-ref的意趣是将标志组件的涉及,那样在写动画是就足以只用多少个类是多少个零部件效果同样,.ng-anchor-in
.ng-anchor-out
.ng-anchor分别是在某零部件突显,某零部件卸载,呈现卸载时累加的类,那样能够在区其他气象运用动画。你能够看看文档的3个DEMO:https://plnkr.co/edit/?p=preview

  关于angular是怎么落到实处变形的,如何落实移动的感兴趣可以看看https://docs.angularjs.org/api/ngAnimate

三、$animate服务

  $animate服务提供了一部分得以落成动画的工具方法,官方提出是只应该将其用在与dom相关的卡通指令中。那翻译的和谐都不精晓了,韩文太差了,如果您想打听越多和气去官网看看,别看本人胡扯了。

  1、on(event, container, callback)

  那几个措施的目标是安装事件侦听器,一旦某元素上触发动画事件(前文有涉及的enter,leave等),其中的回调函数将被调用。

  那些艺术接受几个参数:event代表要侦听的卡通片事件类型,container是二个dom成分,表示要侦听的dom成分(注意她是有事件代理功用的,及子成分的事件会冒泡到该因素被抓获),callback是个回调函数,当事件被触发是履行,可以有八个参数,第①个代表触发事件的要素,首个象征动画阶段个:值start表动画开端,值close表动画为止。

  2、off(event, [container], [callback])

  那一个点子是移出成分的侦听器,参数与上3个艺术的近乎。

  3、pin(element, parentElement)

  不太可以了然这几个法子。文档说那个法子可以让angular应用之外的要素可以实践动画,一般来将大家的angular应用的dom元素都是包括在ng-app内的,约等于说没有元素跑到angular应用之外,所以这么些艺术很让本人费解。

  4、enabled([element], [enabled])

  此措施用于启用或剥夺动画。有三种拔取办法。

  

// returns true or false
$animate.enabled();

// changes the enabled state for all animations
$animate.enabled(false);
$animate.enabled(true);

// returns true or false if animations are enabled for an element
$animate.enabled(element);

// changes the enabled state for an element and its children
$animate.enabled(element, true);
$animate.enabled(element, false);

 

  5、cancel(animationPromise)

  用于撤废动画执行。

  6、enter(element, parent, [after], [options])

  将element作为parent的首先个子成分或然after成分前边的因素。options是二个目标可有上面这多少个本性:

  • addClass – 添加到element的类
  • from – {Object} –
    表示动画开始时的css样式
  • removeClass – {string} -移除element类
  • to – {Object} –
    表示动画结束时的css样式

  这几个主意重返三个promise对象,动画已毕时改为resolved状态。

  7、move(element, parent, [after], [options])

  将element移动到一个新的职位。再次来到3个promise,与enter()类似。

  8、leave(element, [options])

  触发动画然后删除element

  9、addClass(element, className, [options])

  将className类加到element上并触发addClass事件。

  10、removeClass(element, className, [options])

  移出className类并触发removeClass事件。

  11、setClass(element, add, remove, [options])

  12、animate(element, from, to, [className], [options])

  本文给到了贰个angular动画的3个参阅,涉及到ngAnimate的一对个用法,包蕴哪些用CSS指定动画,怎么样用js触发动画等,然后讲到了$animate服务,但是感觉官网讲的也不够详细(也只怕是自家的土耳其共和国(The Republic of Turkey)语太差了)。与angular动画相关的还有$aniamteCss服务,本文没有讲,幸免越讲越乱,感觉方面讲的已经够乱了。

  参考:

相关文章