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

Commit 81923f1

Browse files
matskomhevery
matsko
authored and
mhevery
committed
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
1 parent 11521a4 commit 81923f1

40 files changed

+2961
-2191
lines changed

‎Gruntfile.js

+5
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,10 @@ module.exports = function(grunt) {
160160
dest: 'build/angular-resource.js',
161161
src: util.wrap(['src/ngResource/resource.js'], 'module')
162162
},
163+
animate: {
164+
dest: 'build/angular-animate.js',
165+
src: util.wrap(['src/ngAnimate/animate.js'], 'module')
166+
},
163167
route: {
164168
dest: 'build/angular-route.js',
165169
src: util.wrap([
@@ -178,6 +182,7 @@ module.exports = function(grunt) {
178182

179183
min: {
180184
angular: 'build/angular.js',
185+
animate: 'build/angular-animate.js',
181186
cookies: 'build/angular-cookies.js',
182187
loader: 'build/angular-loader.js',
183188
mobile: 'build/angular-mobile.js',

‎angularFiles.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ angularFiles = {
1010
'src/auto/injector.js',
1111

1212
'src/ng/anchorScroll.js',
13-
'src/ng/animation.js',
14-
'src/ng/animator.js',
13+
'src/ng/animate.js',
1514
'src/ng/browser.js',
1615
'src/ng/cacheFactory.js',
1716
'src/ng/compile.js',
@@ -66,6 +65,7 @@ angularFiles = {
6665
],
6766

6867
'angularSrcModules': [
68+
'src/ngAnimate/animate.js',
6969
'src/ngCookies/cookies.js',
7070
'src/ngResource/resource.js',
7171
'src/ngRoute/routeUtils.js',
@@ -107,6 +107,7 @@ angularFiles = {
107107
'test/*.js',
108108
'test/auto/*.js',
109109
'test/ng/**/*.js',
110+
'test/ngAnimate/*.js',
110111
'test/ngCookies/*.js',
111112
'test/ngResource/*.js',
112113
'test/ngRoute/**/*.js',

‎css/angular.css

+4
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,7 @@
88
ng\:form {
99
display: block;
1010
}
11+
12+
.ng-hide {
13+
display: none;
14+
}

‎docs/component-spec/annotationsSpec.js

+17-22
Original file line numberDiff line numberDiff line change
@@ -67,41 +67,33 @@ describe('Docs Annotations', function() {
6767

6868
var $scope, parent, element, url, window;
6969
beforeEach(function() {
70-
module(function($provide, $animationProvider) {
70+
module(function($provide, $animateProvider) {
7171
$provide.value('$window', window = angular.mock.createMockWindow());
72-
$animationProvider.register('foldout-enter', function($window) {
72+
$animateProvider.register('.foldout', function($window) {
7373
return {
74-
start : function(element, done) {
74+
enter : function(element, done) {
7575
$window.setTimeout(done, 1000);
76-
}
77-
}
78-
});
79-
$animationProvider.register('foldout-hide', function($window) {
80-
return {
81-
start : function(element, done) {
76+
},
77+
show : function(element, done) {
8278
$window.setTimeout(done, 500);
83-
}
84-
}
85-
});
86-
$animationProvider.register('foldout-show', function($window) {
87-
return {
88-
start : function(element, done) {
79+
},
80+
hide : function(element, done) {
8981
$window.setTimeout(done, 200);
9082
}
9183
}
9284
});
9385
});
94-
inject(function($rootScope, $compile, $templateCache, $rootElement, $animator) {
95-
$animator.enabled(true);
86+
inject(function($rootScope, $compile, $templateCache, $rootElement, $animate) {
87+
$animate.enabled(true);
9688
url = '/page.html';
9789
$scope = $rootScope.$new();
9890
parent = angular.element('<div class="parent"></div>');
99-
element = angular.element('<div data-url="' + url + '" foldout></div>');
10091

10192
//we're injecting the element to the $rootElement since the changes in
102-
//$animator only detect and perform animations if the root element has
93+
//$animate only detect and perform animations if the root element has
10394
//animations enabled. If the element is not apart of the DOM
10495
//then animations are skipped.
96+
element = angular.element('<div data-url="' + url + '" class="foldout" foldout></div>');
10597
parent.append(element);
10698
$rootElement.append(parent);
10799
body.append($rootElement);
@@ -142,16 +134,19 @@ describe('Docs Annotations', function() {
142134
$httpBackend.flush();
143135
window.setTimeout.expect(1).process();
144136
window.setTimeout.expect(1000).process();
137+
window.setTimeout.expect(0).process();
145138

146139
//hide
147140
element.triggerHandler('click');
148141
window.setTimeout.expect(1).process();
149-
window.setTimeout.expect(500).process();
142+
window.setTimeout.expect(200).process();
143+
window.setTimeout.expect(0).process();
150144

151145
//show
152146
element.triggerHandler('click');
153147
window.setTimeout.expect(1).process();
154-
window.setTimeout.expect(200).process();
148+
window.setTimeout.expect(500).process();
149+
window.setTimeout.expect(0).process();
155150
}));
156151

157152
});
@@ -160,7 +155,7 @@ describe('Docs Annotations', function() {
160155

161156
var window, $scope, ctrl;
162157
beforeEach(function() {
163-
module(function($provide, $animationProvider) {
158+
module(function($provide, $animateProvider) {
164159
$provide.value('$window', window = angular.mock.createMockWindow());
165160
});
166161
inject(function($rootScope, $controller, $location, $cookies, sections) {

‎docs/components/angular-bootstrap/bootstrap-prettify.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -183,8 +183,8 @@ directive.ngEvalJavascript = ['getEmbeddedTemplate', function(getEmbeddedTemplat
183183
}];
184184

185185

186-
directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', '$sniffer',
187-
function($templateCache, $browser, docsRootScope, $location, $sniffer) {
186+
directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location', '$sniffer', '$animate',
187+
function($templateCache, $browser, docsRootScope, $location, $sniffer, $animate) {
188188
return {
189189
terminal: true,
190190
link: function(scope, element, attrs) {
@@ -193,6 +193,7 @@ directive.ngEmbedApp = ['$templateCache', '$browser', '$rootScope', '$location',
193193
deregisterEmbedRootScope;
194194

195195
modules.push(['$provide', function($provide) {
196+
$provide.value('$animate', $animate);
196197
$provide.value('$templateCache', $templateCache);
197198
$provide.value('$anchorScroll', angular.noop);
198199
$provide.value('$browser', $browser);

‎docs/components/angular-bootstrap/bootstrap.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -335,12 +335,11 @@ directive.tabPane = function() {
335335
};
336336
};
337337

338-
directive.foldout = ['$http', '$animator','$window', function($http, $animator, $window) {
338+
directive.foldout = ['$http', '$animate','$window', function($http, $animate, $window) {
339339
return {
340340
restrict: 'A',
341341
priority : 500,
342342
link: function(scope, element, attrs) {
343-
var animator = $animator(scope, { ngAnimate: "'foldout'" });
344343
var container, loading, url = attrs.url;
345344
if(/\/build\//.test($window.location.href)) {
346345
url = '/build/docs' + url;
@@ -353,7 +352,7 @@ directive.foldout = ['$http', '$animator','$window', function($http, $animator,
353352
loading = true;
354353
var par = element.parent();
355354
container = angular.element('<div class="foldout">loading...</div>');
356-
animator.enter(container, null, par);
355+
$animate.enter(container, null, par);
357356

358357
$http.get(url, { cache : true }).success(function(html) {
359358
loading = false;
@@ -367,12 +366,12 @@ directive.foldout = ['$http', '$animator','$window', function($http, $animator,
367366
//avoid showing the element if the user has already closed it
368367
if(container.css('display') == 'block') {
369368
container.css('display','none');
370-
animator.show(container);
369+
$animate.show(container);
371370
}
372371
});
373372
}
374373
else {
375-
container.css('display') == 'none' ? animator.show(container) : animator.hide(container);
374+
container.hasClass('ng-hide') ? $animate.show(container) : $animate.hide(container);
376375
}
377376
});
378377
});

‎docs/src/example.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ exports.Example.prototype.toHtmlTabs = function() {
134134

135135
exports.Example.prototype.toHtmlEmbed = function() {
136136
var out = [];
137-
out.push('<div class="well doc-example-live animator-container"');
137+
out.push('<div class="well doc-example-live animate-container"');
138138
if(this.animations) {
139139
out.push(" ng-class=\"{'animations-off':animationsOff == true}\"");
140140
}

‎docs/src/ngdoc.js

+13-54
Original file line numberDiff line numberDiff line change
@@ -494,6 +494,19 @@ Doc.prototype = {
494494
html_usage_parameters: function(dom) {
495495
var self = this;
496496
var params = this.param ? this.param : [];
497+
if(this.animations) {
498+
dom.h('Animations', this.animations, function(animations){
499+
dom.html('<ul>');
500+
var animations = animations.split("\n");
501+
animations.forEach(function(ani) {
502+
dom.html('<li>');
503+
dom.text(ani);
504+
dom.html('</li>');
505+
});
506+
dom.html('</ul>');
507+
});
508+
dom.html('<a href="api/ngAnimate.$animate">Click here</a> to learn more about the steps involved in the animation.');
509+
}
497510
if(params.length > 0) {
498511
dom.html('<h2 id="parameters">Parameters</h2>');
499512
dom.html('<table class="variables-matrix table table-bordered table-striped">');
@@ -538,18 +551,6 @@ Doc.prototype = {
538551
dom.html('</tbody>');
539552
dom.html('</table>');
540553
}
541-
if(this.animations) {
542-
dom.h('Animations', this.animations, function(animations){
543-
dom.html('<ul>');
544-
var animations = animations.split("\n");
545-
animations.forEach(function(ani) {
546-
dom.html('<li>');
547-
dom.text(ani);
548-
dom.html('</li>');
549-
});
550-
dom.html('</ul>');
551-
});
552-
}
553554
},
554555

555556
html_usage_returns: function(dom) {
@@ -665,48 +666,6 @@ Doc.prototype = {
665666
dom.text('</' + element + '>');
666667
});
667668
}
668-
if(self.animations) {
669-
var animations = [], matches = self.animations.split("\n");
670-
matches.forEach(function(ani) {
671-
var name = ani.match(/^\s*(.+?)\s*-/)[1];
672-
animations.push(name);
673-
});
674-
675-
dom.html('with <span id="animations">animations</span>');
676-
var comment;
677-
if(animations.length == 1) {
678-
comment = 'The ' + animations[0] + ' animation is supported';
679-
}
680-
else {
681-
var rhs = animations[animations.length-1];
682-
var lhs = '';
683-
for(var i=0;i<animations.length-1;i++) {
684-
if(i>0) {
685-
lhs += ', ';
686-
}
687-
lhs += animations[i];
688-
}
689-
comment = 'The ' + lhs + ' and ' + rhs + ' animations are supported';
690-
}
691-
var element = self.element || 'ANY';
692-
dom.code(function() {
693-
dom.text('//' + comment + "\n");
694-
dom.text('<' + element + ' ');
695-
dom.text(dashCase(self.shortName));
696-
renderParams('\n ', '="', '"', true);
697-
dom.text(' ng-animate="{');
698-
animations.forEach(function(ani, index) {
699-
if (index) {
700-
dom.text(', ');
701-
}
702-
dom.text(ani + ': \'' + ani + '-animation\'');
703-
});
704-
dom.text('}">\n ...\n');
705-
dom.text('</' + element + '>');
706-
});
707-
708-
dom.html('<a href="api/ng.$animator#Methods">Click here</a> to learn more about the steps involved in the animation.');
709-
}
710669
}
711670
self.html_usage_directiveInfo(dom);
712671
self.html_usage_parameters(dom);

0 commit comments

Comments
 (0)