|
1 | 1 | /** |
2 | | - * @license AngularJS v1.5.0-build.4278+sha.b3a3c6a |
| 2 | + * @license AngularJS v1.5.0-build.4279+sha.9f67da6 |
3 | 3 | * (c) 2010-2015 Google, Inc. http://angularjs.org |
4 | 4 | * License: MIT |
5 | 5 | */ |
@@ -640,6 +640,10 @@ var ANIMATE_TIMER_KEY = '$$animateCss'; |
640 | 640 | * * `staggerIndex` - The numeric index representing the stagger item (e.g. a value of 5 is equal to the sixth item in the stagger; therefore when a |
641 | 641 | * * `stagger` option value of `0.1` is used then there will be a stagger delay of `600ms`) |
642 | 642 | * * `applyClassesEarly` - Whether or not the classes being added or removed will be used when detecting the animation. This is set by `$animate` when enter/leave/move animations are fired to ensure that the CSS classes are resolved in time. (Note that this will prevent any transitions from occuring on the classes being added and removed.) |
| 643 | + * * `cleanupStyles` - Whether or not the provided `from` and `to` styles will be removed once |
| 644 | + * the animation is closed. This is useful for when the styles are used purely for the sake of |
| 645 | + * the animation and do not have a lasting visual effect on the element (e.g. a colapse and open animation). |
| 646 | + * By default this value is set to `false`. |
643 | 647 | * |
644 | 648 | * @return {object} an object with start and end methods and details about the animation. |
645 | 649 | * |
@@ -760,6 +764,23 @@ function createLocalCacheLookup() { |
760 | 764 | }; |
761 | 765 | } |
762 | 766 |
|
| 767 | +// we do not reassign an already present style value since |
| 768 | +// if we detect the style property value again we may be |
| 769 | +// detecting styles that were added via the `from` styles. |
| 770 | +// We make use of `isDefined` here since an empty string |
| 771 | +// or null value (which is what getPropertyValue will return |
| 772 | +// for a non-existing style) will still be marked as a valid |
| 773 | +// value for the style (a falsy value implies that the style |
| 774 | +// is to be removed at the end of the animation). If we had a simple |
| 775 | +// "OR" statement then it would not be enough to catch that. |
| 776 | +function registerRestorableStyles(backup, node, properties) { |
| 777 | + forEach(properties, function(prop) { |
| 778 | + backup[prop] = isDefined(backup[prop]) |
| 779 | + ? backup[prop] |
| 780 | + : node.style.getPropertyValue(prop); |
| 781 | + }); |
| 782 | +} |
| 783 | + |
763 | 784 | var $AnimateCssProvider = ['$animateProvider', function($animateProvider) { |
764 | 785 | var gcsLookup = createLocalCacheLookup(); |
765 | 786 | var gcsStaggerLookup = createLocalCacheLookup(); |
@@ -860,6 +881,7 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) { |
860 | 881 | } |
861 | 882 |
|
862 | 883 | return function init(element, options) { |
| 884 | + var restoreStyles = {}; |
863 | 885 | var node = getDomNode(element); |
864 | 886 | if (!node |
865 | 887 | || !node.parentNode |
@@ -1061,7 +1083,12 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) { |
1061 | 1083 | stagger.animationDuration === 0; |
1062 | 1084 | } |
1063 | 1085 |
|
1064 | | - applyAnimationFromStyles(element, options); |
| 1086 | + if (options.from) { |
| 1087 | + if (options.cleanupStyles) { |
| 1088 | + registerRestorableStyles(restoreStyles, node, Object.keys(options.from)); |
| 1089 | + } |
| 1090 | + applyAnimationFromStyles(element, options); |
| 1091 | + } |
1065 | 1092 |
|
1066 | 1093 | if (flags.blockTransition || flags.blockKeyframeAnimation) { |
1067 | 1094 | applyBlocking(maxDuration); |
@@ -1128,6 +1155,13 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) { |
1128 | 1155 | applyAnimationClasses(element, options); |
1129 | 1156 | applyAnimationStyles(element, options); |
1130 | 1157 |
|
| 1158 | + if (Object.keys(restoreStyles).length) { |
| 1159 | + forEach(restoreStyles, function(value, prop) { |
| 1160 | + value ? node.style.setProperty(prop, value) |
| 1161 | + : node.style.removeProperty(prop); |
| 1162 | + }); |
| 1163 | + } |
| 1164 | + |
1131 | 1165 | // the reason why we have this option is to allow a synchronous closing callback |
1132 | 1166 | // that is fired as SOON as the animation ends (when the CSS is removed) or if |
1133 | 1167 | // the animation never takes off at all. A good example is a leave animation since |
@@ -1322,7 +1356,12 @@ var $AnimateCssProvider = ['$animateProvider', function($animateProvider) { |
1322 | 1356 | } |
1323 | 1357 |
|
1324 | 1358 | element.on(events.join(' '), onAnimationProgress); |
1325 | | - applyAnimationToStyles(element, options); |
| 1359 | + if (options.to) { |
| 1360 | + if (options.cleanupStyles) { |
| 1361 | + registerRestorableStyles(restoreStyles, node, Object.keys(options.to)); |
| 1362 | + } |
| 1363 | + applyAnimationToStyles(element, options); |
| 1364 | + } |
1326 | 1365 | } |
1327 | 1366 |
|
1328 | 1367 | function onAnimationExpired() { |
|
0 commit comments