Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

feat($animate): allow $animate to pass custom styles into animations #8974

Closed
wants to merge 3 commits into from
Closed

feat($animate): allow $animate to pass custom styles into animations #8974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cae3239
feat($animate): allow $animate to pass custom styles into animations
matsko Sep 8, 2014
2f1649e
docs complete
matsko Oct 13, 2014
09cc1dc
feat($animate): introduce the $animate.animate() method
matsko Oct 11, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 41 additions & 15 deletions src/ng/animate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,8 @@ var $AnimateProvider = ['$provide', function($provide) {
}
});

return (toAdd.length + toRemove.length) > 0 && [toAdd.length && toAdd, toRemove.length && toRemove];
return (toAdd.length + toRemove.length) > 0 &&
[toAdd.length ? toAdd : null, toRemove.length ? toRemove : null];
}

function cachedClassManipulation(cache, classes, op) {
Expand All @@ -144,6 +145,13 @@ var $AnimateProvider = ['$provide', function($provide) {
return currentDefer.promise;
}

function applyStyles(element, options) {
if (angular.isObject(options)) {
var styles = extend(options.from || {}, options.to || {});
element.css(styles);
}
}

/**
*
* @ngdoc service
Expand All @@ -162,6 +170,10 @@ var $AnimateProvider = ['$provide', function($provide) {
* page}.
*/
return {
animate : function(element, from, to) {
applyStyles(element, { from: from, to: to });
return asyncPromise();
},

/**
*
Expand All @@ -176,9 +188,11 @@ var $AnimateProvider = ['$provide', function($provide) {
* a child (if the after element is not present)
* @param {DOMElement} after the sibling element which will append the element
* after itself
* @param {object=} options an optional collection of styles that will be applied to the element.
* @return {Promise} the animation callback promise
*/
enter : function(element, parent, after) {
enter : function(element, parent, after, options) {
applyStyles(element, options);
after ? after.after(element)
: parent.prepend(element);
return asyncPromise();
Expand All @@ -192,9 +206,10 @@ var $AnimateProvider = ['$provide', function($provide) {
* @description Removes the element from the DOM. When the function is called a promise
* is returned that will be resolved at a later time.
* @param {DOMElement} element the element which will be removed from the DOM
* @param {object=} options an optional collection of options that will be applied to the element.
* @return {Promise} the animation callback promise
*/
leave : function(element) {
leave : function(element, options) {
element.remove();
return asyncPromise();
},
Expand All @@ -214,12 +229,13 @@ var $AnimateProvider = ['$provide', function($provide) {
* inserted into (if the after element is not present)
* @param {DOMElement} after the sibling element where the element will be
* positioned next to
* @param {object=} options an optional collection of options that will be applied to the element.
* @return {Promise} the animation callback promise
*/
move : function(element, parent, after) {
move : function(element, parent, after, options) {
// Do not remove element before insert. Removing will cause data associated with the
// element to be dropped. Insert will implicitly do the remove.
return this.enter(element, parent, after);
return this.enter(element, parent, after, options);
},

/**
Expand All @@ -232,20 +248,23 @@ var $AnimateProvider = ['$provide', function($provide) {
* @param {DOMElement} element the element which will have the className value
* added to it
* @param {string} className the CSS class which will be added to the element
* @param {object=} options an optional collection of options that will be applied to the element.
* @return {Promise} the animation callback promise
*/
addClass : function(element, className) {
return this.setClass(element, className, []);
addClass : function(element, className, options) {
return this.setClass(element, className, [], options);
},

$$addClassImmediately : function(element, className) {
$$addClassImmediately : function(element, className, options) {
element = jqLite(element);
className = !isString(className)
? (isArray(className) ? className.join(' ') : '')
: className;
forEach(element, function (element) {
jqLiteAddClass(element, className);
});
applyStyles(element, options);
return asyncPromise();
},

/**
Expand All @@ -258,20 +277,22 @@ var $AnimateProvider = ['$provide', function($provide) {
* @param {DOMElement} element the element which will have the className value
* removed from it
* @param {string} className the CSS class which will be removed from the element
* @param {object=} options an optional collection of options that will be applied to the element.
* @return {Promise} the animation callback promise
*/
removeClass : function(element, className) {
return this.setClass(element, [], className);
removeClass : function(element, className, options) {
return this.setClass(element, [], className, options);
},

$$removeClassImmediately : function(element, className) {
$$removeClassImmediately : function(element, className, options) {
element = jqLite(element);
className = !isString(className)
? (isArray(className) ? className.join(' ') : '')
: className;
forEach(element, function (element) {
jqLiteRemoveClass(element, className);
});
applyStyles(element, options);
return asyncPromise();
},

Expand All @@ -286,9 +307,10 @@ var $AnimateProvider = ['$provide', function($provide) {
* removed from it
* @param {string} add the CSS classes which will be added to the element
* @param {string} remove the CSS class which will be removed from the element
* @param {object=} options an optional collection of options that will be applied to the element.
* @return {Promise} the animation callback promise
*/
setClass : function(element, add, remove) {
setClass : function(element, add, remove, options) {
var self = this;
var STORAGE_KEY = '$$animateClasses';
var createdCache = false;
Expand All @@ -297,9 +319,12 @@ var $AnimateProvider = ['$provide', function($provide) {
var cache = element.data(STORAGE_KEY);
if (!cache) {
cache = {
classes: {}
classes: {},
options : options
};
createdCache = true;
} else if (options && cache.options) {
cache.options = angular.extend(cache.options || {}, options);
}

var classes = cache.classes;
Expand All @@ -320,7 +345,7 @@ var $AnimateProvider = ['$provide', function($provide) {
if (cache) {
var classes = resolveElementClasses(element, cache.classes);
if (classes) {
self.$$setClassImmediately(element, classes[0], classes[1]);
self.$$setClassImmediately(element, classes[0], classes[1], cache.options);
}
}

Expand All @@ -332,9 +357,10 @@ var $AnimateProvider = ['$provide', function($provide) {
return cache.promise;
},

$$setClassImmediately : function(element, add, remove) {
$$setClassImmediately : function(element, add, remove, options) {
add && this.$$addClassImmediately(element, add);
remove && this.$$removeClassImmediately(element, remove);
applyStyles(element, options);
return asyncPromise();
},

Expand Down
8 changes: 6 additions & 2 deletions src/ng/directive/ngShowHide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,9 @@ var ngShowDirective = ['$animate', function($animate) {
// we can control when the element is actually displayed on screen without having
// to have a global/greedy CSS selector that breaks when other animations are run.
// Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845
$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, NG_HIDE_IN_PROGRESS_CLASS);
$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
tempClasses : NG_HIDE_IN_PROGRESS_CLASS
});
});
}
};
Expand Down Expand Up @@ -324,7 +326,9 @@ var ngHideDirective = ['$animate', function($animate) {
scope.$watch(attr.ngHide, function ngHideWatchAction(value){
// The comment inside of the ngShowDirective explains why we add and
// remove a temporary class for the show/hide animation
$animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, NG_HIDE_IN_PROGRESS_CLASS);
$animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, {
tempClasses : NG_HIDE_IN_PROGRESS_CLASS
});
});
}
};
Expand Down
Loading