zoukankan      html  css  js  c++  java
  • service $animate

    $animate服务公开了一系列的DOM实用程序方法,这些方法提供了对动画挂钩的支持。默认的行为是DOM操作的应用,但是,当检测到一个动画(并启用了动画),$animate将执行繁重的工作,以确保动画在触发的DOM操作中运行。

    方法:

    on(event, container, callback):设置一个事件侦听器,当动画事件(输入、离开、移动等)触发时,它会指向给定的元素或它的任何一个子对象。一旦侦听器被触发,所提供的回调就会被以下的参数所触发:

    $animate.on('enter', container,
       function callback(element, phase) {
         // cool we detected an enter animation within the container
       }
    );

    参数:event String 将被捕获的动画事件(如:输入、离开、移动、addClass、removeClass等)。

       container DOMElement 容器元素将捕获每个被触发的动画事件以及它的子元素

       callback function 当侦听器被触发时将被触发的回调函数 回调函数中出现的参数:element—动画被触发的捕获DOM元素。phase-动画的阶段。这两个可能的阶段是开始(当动画开始时)和结束(当它结束时)。

    ---------------------------------------------------------------------------------------------------------------------------------------------

    off(event, [container], [callback]):根据与提供的元素相关联的事件,将事件侦听器作为一个事件侦听器。这种方法可以根据不同的参数使用三种不同的方法:

    // remove all the animation event listeners listening for `enter`
    $animate.off('enter');//删除所有的动画事件监听器监听输入
    
    // remove listeners for all animation events from the container element
    $animate.off(container);//从容器元素中删除所有动画事件的侦听器
    
    // remove all the animation event listeners listening for `enter` on the given element and its children
    $animate.off('enter', container);//删除所有在给定元素及其子元素中监听的动画事件监听器
    
    // remove the event listener function provided by `callback` that is set
    // to listen for `enter` on the given `container` as well as its children
    $animate.off('enter', container, callback);//删除由回调所提供的事件侦听器函数,该函数将侦听给定容器及其子元素的输入

    参数:event | container String|DOMElement 动画事件(例如:输入、离开、移动、addClass、removeClass等等。),或者容器元素。如果是元素,那么所有其他的参数都会被忽略。

       container(optional) DOMElement 容器元素事件监听器被放在

       callback(optional) function 作为侦听器注册的回调函数

    ---------------------------------------------------------------------------------------------------------------------------------------------

    pin(element, parentElement):将所提供的元素与主机父元素关联起来,使元素能够被激活,即使它存在于AngularJS应用程序的DOM结构之外。通过这样做,任何通过$animate触发的动画都可以在该元素上发布,尽管它不在应用程序或其他应用程序的范围内。例如,如果应用程序是在某个元素的某个元素上启动的,但是我们希望允许一个元素作为文档的直接子元素。主体,然后通过$animate.pin(element)固定元素来实现这一点。请记住,调用$动画。pin(element,parementElement)实际上不会在任何地方插入DOM,它只会创建关联。

    注意,这个特性只有在使用了ngAnimate模块时才会激活。

    参数:element DOMElement 将被固定的外部元素

       parentElement DOMElement 将与外部元素相关联的主机父元素

    ---------------------------------------------------------------------------------------------------------------------------------------------

    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);

    参数:element(optional) DOMElement 用于检查/设置启用状态的元素

       enabled(optional) 动画是否将支持元素

    返回值:boolean 是否启用了动画

    ---------------------------------------------------------------------------------------------------------------------------------------------

    cancel(animationPromise):取消所提供的动画。

    参数:animationPromise Promise 动画的承诺是在动画启动时返回的。

    --------------------------------------------------------------------------------------------------------------------------------------------- 

    enter(element, parent, [after], [options]):将元素插入到DOM中,要么在后面的元素(如果提供),要么作为父元素中的第一个子元素,然后触发一个动画。当动画完成后,将在下一次的摘要中解析一个承诺。

    参数:element DOMElement 将被插入到DOM中的元素

       parent DOMElement 父元素,它将作为子元素附加元素(只要后面的元素没有出现)

       after(optional) DOMElement 元素后面的元素元素将被追加

       options(optional) object 一个可选的选项集合,将应用于该元素。该对象可以具有以下属性:addClass - {string} - 空格分隔的CSS类添加到元素 from - {Object} - 在动画开始的时候,CSS属性和值。 removeClass - {string} - 必须匹配空格分隔的CSS类从元素中删除 to - {Object} - 在动画结束时,CSS属性和值。必须匹配的from

    返回值:promise 动画的回调的承诺

    ---------------------------------------------------------------------------------------------------------------------------------------------

    move(element, parent, [after], [options]):将元素插入到DOM中的新位置(如果提供了),或者作为父元素中的第一个子元素,然后触发一个动画。当动画完成后,将在下一次的摘要中解析一个承诺。

    参数:element DOMElement 将被移动到新的DOM位置的元素

       parent DOMElement 父元素,它将作为子元素附加元素(只要后面的元素没有出现)

       after(optional) DOMElement 元素后面的元素元素将被追加

       options(optional) object 一个可选的选项集合,将应用于该元素。该对象可以具有以下属性:addClass - {string} - 空格分隔的CSS类添加到元素 from - {Object} - 在动画开始的时候,CSS属性和值。 removeClass - {string} - 必须匹配空格分隔的CSS类从元素中删除 to - {Object} - 在动画结束时,CSS属性和值。必须匹配的from

    返回值:promise 动画的回调的承诺

    ---------------------------------------------------------------------------------------------------------------------------------------------

    leave(element, [options]):触发一个动画,然后从DOM中删除元素。当函数被调用时,返回的承诺将在动画完成后的下一个摘要中解析。

    参数:element DOMElement 将从DOM中删除的元素

       options(optional) object 一个可选的选项集合,将应用于该元素。该对象可以具有以下属性:addClass - {string} - 空格分隔的CSS类添加到元素 from - {Object} - 在动画开始的时候,CSS属性和值。 removeClass - {string} - 必须匹配空格分隔的CSS类从元素中删除 to - {Object} - 在动画结束时,CSS属性和值。必须匹配的from

    返回值:promise 动画的回调的承诺

    ---------------------------------------------------------------------------------------------------------------------------------------------

    addClass(element, className, [options]):在添加了提供的CSS类(es)的基础上触发一个addClass动画。执行之后,addClass操作只会在下一个摘要之后处理,如果元素已经包含了CSS类,或者在以后的步骤中删除了类,它就不会触发动画。注意,基于类的动画与结构动画(如回车、移动和离开)的处理方式不同,因为CSS类可能会在不同的点上被删除/移除,这取决于CSS或JavaScript动画的使用。

    参数:element DOMElement CSS类将被应用于这个元素

       className String 将添加的CSS类(es)(多个类通过空格分隔)

       options(optional) object 一个可选的选项集合,将应用于该元素。该对象可以具有以下属性:addClass - {string} - 空格分隔的CSS类添加到元素 from - {Object} - 在动画开始的时候,CSS属性和值。 removeClass - {string} - 必须匹配空格分隔的CSS类从元素中删除 to - {Object} - 在动画结束时,CSS属性和值。必须匹配的from

    返回值:promise 动画的回调的承诺

    ---------------------------------------------------------------------------------------------------------------------------------------------

    removeClass(element, className, [options]):触发一个removeClass动画,围绕删除提供的CSS类(es)。在执行时,removeClass操作只会在下一个摘要之后处理,如果元素不包含CSS类,或者在以后的步骤中添加类,它也不会触发动画。注意,基于类的动画与结构动画(如回车、移动和离开)的处理方式不同,因为CSS类可能会在不同的点上被删除/移除,这取决于CSS或JavaScript动画的使用。

    参数:element DOMElement CSS类将被应用于这个元素

       className String 将添加的CSS类(es)(多个类通过空格分隔)

       options(optional) object 一个可选的选项集合,将应用于该元素。该对象可以具有以下属性:addClass - {string} - 空格分隔的CSS类添加到元素 from - {Object} - 在动画开始的时候,CSS属性和值。 removeClass - {string} - 必须匹配空格分隔的CSS类从元素中删除 to - {Object} - 在动画结束时,CSS属性和值。必须匹配的from

    返回值:promise 动画的回调的承诺

    ---------------------------------------------------------------------------------------------------------------------------------------------

    setClass(element, add, remove, [options]):在一个元素上同时执行CSS类的添加和删除操作(在过程中)触发一个围绕类添加/删除的动画。就像$animate.addClass and $animate.removeClasssetClass只会对被消化的类进行评估。注意,基于类的动画与结构动画(如回车、移动和离开)的处理方式不同,因为CSS类可能会在不同的点上被删除/移除,这取决于CSS或JavaScript动画的使用。

    参数:element DOMElement CSS类将被应用于这个元素

       add String 将添加的CSS类(es)(多个类通过空格分隔)

       remove String 将移除的CSS类(es)(多个类通过空格分隔)

       options(optional) object 一个可选的选项集合,将应用于该元素。该对象可以具有以下属性:addClass - {string} - 空格分隔的CSS类添加到元素 from - {Object} - 在动画开始的时候,CSS属性和值。 removeClass - {string} - 必须匹配空格分隔的CSS类从元素中删除 to - {Object} - 在动画结束时,CSS属性和值。必须匹配的from

    返回值:promise 动画的回调的承诺

    ---------------------------------------------------------------------------------------------------------------------------------------------

    animate(element, from, to, [className], [options]):在元素上执行一个内联动画,它将提供的内容和CSS样式应用到元素中。如果任何检测到的CSS转换,关键帧或JavaScript都匹配提供的类名值,那么动画就会呈现所提供的样式。例如,如果为给定的类名设置了转换动画,那么在给定的转换过程中,将提供提供的和样式的样式。如果所提供的CSS样式没有相应的样式,则立即应用样式,并且不运行动画。如果检测到JavaScript动画,那么所提供的样式将作为函数参数传入动画方法(或作为选项参数的一部分):

    ngModule.animation('.my-inline-animation', function() {
      return {
        animate : function(element, from, to, done, options) {
          //animation
          done();
        }
      }
    });

    参数:element DOMElement CSS类将被应用于这个元素

       form object 从(开始)CSS样式,将应用到元素和整个动画。

       to object to(目的地)CSS样式,将应用于元素和整个动画。

       className(optaional)一个可选的CSS类,它将在动画的持续时间内应用到元素上。如果该值为空,那么将应用到该元素的ng-inline动画的CSS类。(注意,如果没有检测到动画,那么这个值将不会被应用到元素中。)

       options(optional) object 一个可选的选项集合,将应用于该元素。该对象可以具有以下属性:addClass - {string} - 空格分隔的CSS类添加到元素 from - {Object} - 在动画开始的时候,CSS属性和值。 removeClass - {string} - 必须匹配空格分隔的CSS类从元素中删除 to - {Object} - 在动画结束时,CSS属性和值。必须匹配的from

    返回值:promise 动画的回调的承诺

  • 相关阅读:
    day7 面向对象 静态方法 类方法 属性方法 类的特殊成员方法 元类 反射 异常处理
    day6 面向对象 封装 继承 多态 类与实例在内存中的关系 经典类和新式类
    day5 time datetime random os sys shutil json pickle shelve xml configparser hashlib subprocess logging re正则 python计算器
    kafka常用操作命令
    linux基础
    django学习1——初识web应用程序
    mysql数据库(三)——pymysql模块
    mysql数据库(二)——表的查询
    mysql数据库(一)
    Python常用模块——re模块
  • 原文地址:https://www.cnblogs.com/ms-grf/p/7048580.html
Copyright © 2011-2022 走看看