EVOLUTION-MANAGER

Edit File: $animateProvider.html

<a href='https://github.com/angular/angular.js/edit/v1.3.x/src/ng/animate.js?message=docs($animateProvider)%3A%20describe%20your%20change...#L5' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>

<a href='https://github.com/angular/angular.js/tree/v1.3.9/src/ng/animate.js#L5' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>

<header class="api-profile-header">
  <h1 class="api-profile-header-heading">$animateProvider</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
  <li>
    <a href="api/ng/service/$animate">- $animate</a>
  </li>

<li>
      - provider in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>

<div class="api-profile-description">
  <p>Default implementation of $animate that doesn&#39;t perform any animations, instead just
synchronously performs DOM
updates and calls done() callbacks.</p>
<p>In order to enable animations the ngAnimate module has to be loaded.</p>
<p>To see the functional implementation check out src/ngAnimate/animate.js</p>

</div>

<div>

<h2>Methods</h2>
<ul class="methods">
  <li id="register">
    <h3><p><code>register(name, factory);</code></p>

</h3>
    <div><p>Registers a new injectable animation factory function. The factory function produces the
animation object which contains callback functions for each event that is expected to be
animated.</p>
<ul>
<li><code>eventFn</code>: <code>function(Element, doneFunction)</code> The element to animate, the <code>doneFunction</code>
must be called once the element animation is complete. If a function is returned then the
animation service will use this function to cancel the animation whenever a cancel event is
triggered.</li>
</ul>
<pre><code class="lang-js">return {
  eventFn : function(element, done) {
    //code to run the animation
    //once complete, then run done()
    return function cancellationFunction() {
      //code to cancel the animation
    }
  }
}
</code></pre>
</div>

<h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a>
      </td>
      <td>
        <p>The name of the animation.</p>

</td>
    </tr>
    
    <tr>
      <td>
        factory
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-function">Function</a>
      </td>
      <td>
        <p>The factory function that will be executed to return the animation
                          object.</p>

</td>
    </tr>
    
  </tbody>
</table>

</li>
  
  <li id="classNameFilter">
    <h3><p><code>classNameFilter([expression]);</code></p>

</h3>
    <div><p>Sets and/or returns the CSS class regular expression that is checked when performing
an animation. Upon bootstrap the classNameFilter value is not set at all and will
therefore enable $animate to attempt to perform an animation on any element.
When setting the classNameFilter value, animations will only be performed on elements
that successfully match the filter expression. This in turn can boost performance
for low-powered devices as well as applications containing a lot of structural operations.</p>
</div>

<h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        expression
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-regexp">RegExp</a>
      </td>
      <td>
        <p>The className expression which will be checked against all animations</p>

</td>
    </tr>
    
  </tbody>
</table>

<h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-regexp">RegExp</a></td>
    <td><p>The current CSS className expression value. If null then there is no expression value</p>
</td>
  </tr>
</table>

</li>
  </ul>

</div>