diff options
| author | Matias Niemelä | 2013-06-18 13:59:57 -0400 | 
|---|---|---|
| committer | Misko Hevery | 2013-07-26 23:49:54 -0700 | 
| commit | 81923f1e41560327f7de6e8fddfda0d2612658f3 (patch) | |
| tree | bbf8151bddf4d026f8f5fa3196b84a45ecd9c858 /src/ng/animate.js | |
| parent | 11521a4cde689c2bd6aaa227b1f45cb3fb53725b (diff) | |
| download | angular.js-81923f1e41560327f7de6e8fddfda0d2612658f3.tar.bz2 | |
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions
- support for triggering animations on css class additions and removals
- done callback was added to all animation apis
- $animation and $animator where merged into a single $animate service with api:
  - $animate.enter(element, parent, after, done);
  - $animate.leave(element, done);
  - $animate.move(element, parent, after, done);
  - $animate.addClass(element, className, done);
  - $animate.removeClass(element, className, done);
BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
Diffstat (limited to 'src/ng/animate.js')
| -rw-r--r-- | src/ng/animate.js | 112 | 
1 files changed, 112 insertions, 0 deletions
| diff --git a/src/ng/animate.js b/src/ng/animate.js new file mode 100644 index 00000000..7e515594 --- /dev/null +++ b/src/ng/animate.js @@ -0,0 +1,112 @@ +'use strict'; + +/** + * @ngdoc object + * @name ng.$animateProvider + * + * @description + * Default implementation of $animate that doesn't perform any animations, instead just synchronously performs DOM + * updates and calls done() callbacks. + * + * In order to enable animations the ngAnimate module has to be loaded. + * + * To see the functional implementation check out src/ngAnimate/animate.js + */ +var $AnimateProvider = ['$provide', function($provide) { + +  this.$$selectors = []; + + +  /** +   * @ngdoc function +   * @name ng.$animateProvider#register +   * @methodOf ng.$animateProvider +   * +   * @description +   * 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. +   * +   *   * `eventFn`: `function(Element, doneFunction)` The element to animate, the `doneFunction` 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. +   * +   * +   *<pre> +   *   return { +     *     eventFn : function(element, done) { +     *       //code to run the animation +     *       //once complete, then run done() +     *       return function cancellationFunction() { +     *         //code to cancel the animation +     *       } +     *     } +     *   } +   *</pre> +   * +   * @param {string} name The name of the animation. +   * @param {function} factory The factory function that will be executed to return the animation object. +   */ +  this.register = function(name, factory) { +    var classes = name.substr(1).split('.'); +    name += '-animation'; +    this.$$selectors.push({ +      selectors : classes, +      name : name +    }); +    $provide.factory(name, factory); +  }; + +  this.$get = function() { +    return { +      enter : function(element, parent, after, done) { +        var afterNode = after && after[after.length - 1]; +        var parentNode = parent && parent[0] || afterNode && afterNode.parentNode; +        // IE does not like undefined so we have to pass null. +        var afterNextSibling = (afterNode && afterNode.nextSibling) || null; +        forEach(element, function(node) { +          parentNode.insertBefore(node, afterNextSibling); +        }); +        (done || noop)(); +      }, + +      leave : function(element, done) { +        element.remove(); +        (done || noop)(); +      }, + +      move : function(element, parent, after, done) { +        // Do not remove element before insert. Removing will cause data associated with the +        // element to be dropped. Insert will implicitly do the remove. +        this.enter(element, parent, after, done); +      }, + +      show : function(element, done) { +        element.removeClass('ng-hide'); +        (done || noop)(); +      }, + +      hide : function(element, done) { +        element.addClass('ng-hide'); +        (done || noop)(); +      }, + +      addClass : function(element, className, done) { +        className = isString(className) ? +                      className : +                      isArray(className) ? className.join(' ') : ''; +        element.addClass(className); +        (done || noop)(); +      }, + +      removeClass : function(element, className, done) { +        className = isString(className) ? +                      className : +                      isArray(className) ? className.join(' ') : ''; +        element.removeClass(className); +        (done || noop)(); +      }, + +      enabled : noop +    }; +  }; +}]; | 
