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

  最近当扣押算法分析,那个大O啊,小o啊,分治法啊(目前尽管盼此),真是折腾大了。这反过来呢休息一下,学学AngularJS动画,上一致首稿子根据随便男人的修简单说到了动画的话题,发现影响异常特别(好吧,我说特别了,那篇稿子的卡通片谈得极度简单了),今天来看看官方文档。嗯,边看边写。

一、安装

  这个理应都亮了,和其余的扩展模块安装相同。这里为文章完整性简单提一下。文档给到了获得动画扩展angular-animate.js的强法。

  1、cdn,自己去查

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

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

  用到这文件后需引入到我们设动动画的页面,添加依赖ngAnimate。

二、使用

  动画的采用办法发出半点栽,一凡是CSS,二凡是透过javascript。前者是由此纯粹的css来实现动画,后者通过脚本触发动画。两者都亟待使用Angrular提供的有些非常之类似。

  1、支持动画的通令

  图片 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是,会也素添加一个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; */
}

 

  就比如这法,给咱的动画类加上一个叫.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。

  4、基于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分别是当有零部件显示,某零部件卸载,显示卸载时增长的近乎,这样好当不同的状态下动画。你可以看文档的一个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、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移动及一个初的职。返回一个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动画的一个参阅,涉及到ngAnimate的局部只用法,包括什么用CSS指定动画,如何用js触发动画等,然后说到了$animate服务,不过感觉官网称的吗不够详细(也或是自身之英语太差了)。与angular动画相关的还有$aniamteCss服务,本文没有说话,防止越摆越乱,感觉方面讲的已经够乱了。

  参考:

  • https://docs.angularjs.org/api/ng/service/$animate
  • https://docs.angularjs.org/api/ngAnimate/service/$animateCss
  • https://docs.angularjs.org/api/ngAnimate

相关文章