$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.removeClass
, setClass
只会对被消化的类进行评估。注意,基于类的动画与结构动画(如回车、移动和离开)的处理方式不同,因为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 动画的回调的承诺