aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/animate.js
diff options
context:
space:
mode:
authorMatias Niemelä2013-06-18 13:59:57 -0400
committerMisko Hevery2013-07-26 23:49:54 -0700
commit81923f1e41560327f7de6e8fddfda0d2612658f3 (patch)
treebbf8151bddf4d026f8f5fa3196b84a45ecd9c858 /src/ng/animate.js
parent11521a4cde689c2bd6aaa227b1f45cb3fb53725b (diff)
downloadangular.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.js112
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
+ };
+ };
+}];