• 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 动画的回调的承诺

  • 相关阅读:
    字符串匹配算法
    C#中窗体的位置和大小
    关于C#值类型,引用类型,值传递,引用传递(转载)
    ArcMap中设置.mxd相对路径
    统计学上的知识
    .NET 数学实现资料(ZZ)
    牛腩新闻系统学习笔记06讲 编写SQLHelper
    DropDownList 控件不能触发SelectedIndexChanged 事件的另一个原因
    牛腩新闻视频 03讲 数据库设计的心得 如何建立外键sql2008的数据库关系图功能
    使用sql server management studio 2008 连接数据库,无法查看数据库,提示 无法为该请求检索数据 错误916
  • 原文地址:https://www.cnblogs.com/ms-grf/p/7048580.html
Copyright © 2020-2023  润新知