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

Commit 2f1649e

Browse files
matskomatsko
committed
docs complete
1 parent cae3239 commit 2f1649e

File tree

6 files changed

+70
-49
lines changed

6 files changed

+70
-49
lines changed

‎src/ng/animate.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -147,12 +147,8 @@ var $AnimateProvider = ['$provide', function($provide) {
147147

148148
function applyStyles(element, options) {
149149
if (angular.isObject(options)) {
150-
if (options.from || options.to) {
151-
options = extend(options.from || {}, options.to || {});
152-
} else {
153-
delete options.tempClasses;
154-
}
155-
element.css(options);
150+
var styles = extend(options.from || {}, options.to || {});
151+
element.css(styles);
156152
}
157153
}
158154

‎src/ng/directive/ngShowHide.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,9 @@ var ngShowDirective = ['$animate', function($animate) {
167167
// we can control when the element is actually displayed on screen without having
168168
// to have a global/greedy CSS selector that breaks when other animations are run.
169169
// Read: https://github.com/angular/angular.js/issues/9103#issuecomment-58335845
170-
$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, NG_HIDE_IN_PROGRESS_CLASS);
170+
$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
171+
tempClasses : NG_HIDE_IN_PROGRESS_CLASS
172+
});
171173
});
172174
}
173175
};
@@ -324,7 +326,9 @@ var ngHideDirective = ['$animate', function($animate) {
324326
scope.$watch(attr.ngHide, function ngHideWatchAction(value){
325327
// The comment inside of the ngShowDirective explains why we add and
326328
// remove a temporary class for the show/hide animation
327-
$animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, NG_HIDE_IN_PROGRESS_CLASS);
329+
$animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, {
330+
tempClasses : NG_HIDE_IN_PROGRESS_CLASS
331+
});
328332
});
329333
}
330334
};

‎src/ngAnimate/animate.js

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -323,24 +323,26 @@
323323
*
324324
* ### Applying Directive-specific Styles to an Animation
325325
* In some cases a directive or service may want to provide `$animate` with extra details that the animation will
326-
* include into its CSS-based animation. Let's say for example we wanted to render an animation that animates an
327-
* element towards the mouse coordinates as to where the user clicked last. By collecting the X/Y coordinates of
328-
* the click (via the event parameter) we can set the `top` and `left` styles into an object and pass that into
329-
* our function call to `$animate.addClass`.
326+
* include into its animation. Let's say for example we wanted to render an animation that animates an element
327+
* towards the mouse coordinates as to where the user clicked last. By collecting the X/Y coordinates of the click
328+
* (via the event parameter) we can set the `top` and `left` styles into an object and pass that into our function
329+
* call to `$animate.addClass`.
330330
*
331331
* ```js
332332
* canvas.on('click', function(e) {
333333
* $animate.addClass(element, 'on', {
334-
* left : e.client.x + 'px',
335-
* top : e.client.y + 'px'
334+
* to: {
335+
* left : e.client.x + 'px',
336+
* top : e.client.y + 'px'
337+
* }
336338
* }):
337339
* });
338340
* ```
339341
*
340342
* Now when the animation runs, and a transition or keyframe animation is picked up, then the animation itself will
341-
* also include and transition the styling of the `left` and `top` properties into it's running animation. If we want
343+
* also include and transition the styling of the `left` and `top` properties into its running animation. If we want
342344
* to provide some starting animation values then we can do so by placing the starting animations styles into an object
343-
* called `before`. The destination styles are then placed inside of object called `after`.
345+
* called `from` in the same object as the `to` animations.
344346
*
345347
* ```js
346348
* canvas.on('click', function(e) {
@@ -514,15 +516,12 @@ angular.module('ngAnimate', ['ng'])
514516
// some plugin code may still be passing in the callback
515517
// function as the last param for the $animate methods so
516518
// it's best to only allow string or array values for now
517-
if (isString(options)) {
518-
options = options.split(/\s+/);
519-
}
520-
if (isArray(options)) {
521-
options = {
522-
tempClasses : options
523-
};
519+
if (isObject(options)) {
520+
if (options.tempClasses && isString(options.tempClasses)) {
521+
options.tempClasses = options.tempClasses.split(/\s+/);
522+
}
523+
return options;
524524
}
525-
if (isObject(options)) return options;
526525
}
527526

528527
function resolveElementClasses(element, cache, runningAnimations) {
@@ -607,11 +606,9 @@ angular.module('ngAnimate', ['ng'])
607606
return;
608607
}
609608

610-
if (options && !options.from && !options.to) {
611-
options = {
612-
from : null,
613-
to : options
614-
};
609+
if (options) {
610+
options.to = options.to || {};
611+
options.from = options.from || {};
615612
}
616613

617614
var classNameAdd;
@@ -728,7 +725,7 @@ angular.module('ngAnimate', ['ng'])
728725
isSetClassOperation : isSetClassOperation,
729726
applyStyles : function() {
730727
if (options) {
731-
element.css(angular.extend(options.from || {}, options.to));
728+
element.css(angular.extend(options.from || {}, options.to || {}));
732729
}
733730
},
734731
before : function(allCompleteFn) {

‎test/ng/animateSpec.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -111,25 +111,37 @@ describe("$animate", function() {
111111
parent.append(other);
112112
$animate.enabled(true);
113113

114-
$animate.enter(element, parent, null, { color : 'red' });
114+
$animate.enter(element, parent, null, {
115+
to: { color : 'red' }
116+
});
115117
assertColor('red');
116118

117-
$animate.move(element, null, other, { color : 'yellow' });
119+
$animate.move(element, null, other, {
120+
to: { color : 'yellow' }
121+
});
118122
assertColor('yellow');
119123

120-
$animate.addClass(element, 'on', { color : 'green' });
124+
$animate.addClass(element, 'on', {
125+
to: { color : 'green' }
126+
});
121127
$rootScope.$digest();
122128
assertColor('green');
123129

124-
$animate.setClass(element, 'off', 'on', { color : 'black' });
130+
$animate.setClass(element, 'off', 'on', {
131+
to: { color : 'black' }
132+
});
125133
$rootScope.$digest();
126134
assertColor('black');
127135

128-
$animate.removeClass(element, 'off', { color : 'blue' });
136+
$animate.removeClass(element, 'off', {
137+
to: { color : 'blue' }
138+
});
129139
$rootScope.$digest();
130140
assertColor('blue');
131141

132-
$animate.leave(element, 'off', { color : 'blue' });
142+
$animate.leave(element, 'off', {
143+
to: { color : 'blue' }
144+
});
133145
assertColor('blue'); //nothing should happen the element is gone anyway
134146

135147
function assertColor(color) {

‎test/ng/directive/ngShowHideSpec.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -170,13 +170,13 @@ describe('ngShow / ngHide animations', function() {
170170

171171
item = $animate.queue.shift();
172172
expect(item.event).toEqual('addClass');
173-
expect(item.options).toEqual('ng-hide-animate');
173+
expect(item.options.tempClasses).toEqual('ng-hide-animate');
174174

175175
$scope.on = true;
176176
$scope.$digest();
177177
item = $animate.queue.shift();
178178
expect(item.event).toEqual('removeClass');
179-
expect(item.options).toEqual('ng-hide-animate');
179+
expect(item.options.tempClasses).toEqual('ng-hide-animate');
180180
}));
181181
});
182182

@@ -217,13 +217,13 @@ describe('ngShow / ngHide animations', function() {
217217

218218
item = $animate.queue.shift();
219219
expect(item.event).toEqual('removeClass');
220-
expect(item.options).toEqual('ng-hide-animate');
220+
expect(item.options.tempClasses).toEqual('ng-hide-animate');
221221

222222
$scope.on = true;
223223
$scope.$digest();
224224
item = $animate.queue.shift();
225225
expect(item.event).toEqual('addClass');
226-
expect(item.options).toEqual('ng-hide-animate');
226+
expect(item.options.tempClasses).toEqual('ng-hide-animate');
227227
}));
228228
});
229229
});

‎test/ngAnimate/animateSpec.js

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1143,7 +1143,7 @@ describe("ngAnimate", function() {
11431143
element = $compile('<div class="fake-animation"></div>')($rootScope);
11441144

11451145
$animate.enter(element, $rootElement, null, {
1146-
borderColor: 'red'
1146+
to : {borderColor: 'red'}
11471147
});
11481148

11491149
$rootScope.$digest();
@@ -1343,7 +1343,7 @@ describe("ngAnimate", function() {
13431343
element = $compile(html('<div>1</div>'))($rootScope);
13441344

13451345
$animate.addClass(element, 'on', {
1346-
borderColor: 'blue'
1346+
to: {borderColor: 'blue'}
13471347
});
13481348

13491349
$rootScope.$digest();
@@ -2346,7 +2346,7 @@ describe("ngAnimate", function() {
23462346
element = $compile(html('<div>1</div>'))($rootScope);
23472347

23482348
$animate.addClass(element, 'on', {
2349-
color: 'red'
2349+
to: {color: 'red'}
23502350
});
23512351

23522352
$rootScope.$digest();
@@ -2808,28 +2808,40 @@ describe("ngAnimate", function() {
28082808
$compile(element)($rootScope);
28092809

28102810
assertTempClass('enter', 'temp-enter', function() {
2811-
$animate.enter(element, container, null, 'temp-enter');
2811+
$animate.enter(element, container, null, {
2812+
tempClasses: 'temp-enter'
2813+
});
28122814
});
28132815

28142816
assertTempClass('move', 'temp-move', function() {
2815-
$animate.move(element, null, container2, 'temp-move');
2817+
$animate.move(element, null, container2, {
2818+
tempClasses: 'temp-move'
2819+
});
28162820
});
28172821

28182822
assertTempClass('addClass', 'temp-add', function() {
2819-
$animate.addClass(element, 'add', 'temp-add');
2823+
$animate.addClass(element, 'add', {
2824+
tempClasses: 'temp-add'
2825+
});
28202826
});
28212827

28222828
assertTempClass('removeClass', 'temp-remove', function() {
2823-
$animate.removeClass(element, 'add', 'temp-remove');
2829+
$animate.removeClass(element, 'add', {
2830+
tempClasses: 'temp-remove'
2831+
});
28242832
});
28252833

28262834
element.addClass('remove');
28272835
assertTempClass('setClass', 'temp-set', function() {
2828-
$animate.setClass(element, 'add', 'remove', 'temp-set');
2836+
$animate.setClass(element, 'add', 'remove', {
2837+
tempClasses: 'temp-set'
2838+
});
28292839
});
28302840

28312841
assertTempClass('leave', 'temp-leave', function() {
2832-
$animate.leave(element, 'temp-leave');
2842+
$animate.leave(element, {
2843+
tempClasses: 'temp-leave'
2844+
});
28332845
});
28342846

28352847
function assertTempClass(event, className, animationOperation) {

0 commit comments

Comments
 (0)