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 + }; + }; +}]; |
