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