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

Commit c8700f0

Browse files
committed
feat($animate): complete refactor of internal animation code
All of ngAnimate has been rewritten to make the internals of the animation code more flexible, reuseable and performant. BREAKING CHANGE: JavaSript and CSS animations can no longer be run in parallel. With earlier versions of ngAnimate, both CSS and JS animations would be run together when multiple animations were detected. This feature has now been removed, however, the same effect, with even more possibilities, can be achieved by injecting `$animateCss` into a JavaScript-defined animation and creating custom CSS-based animations from there. Read the ngAnimate docs for more info. BREAKING CHANGE: The function params for `$animate.enabled()` when an element is used are now flipped. This fix allows the function to act as a getter when a single element param is provided. ```js // < 1.4 $animate.enabled(false, element); // 1.4+ $animate.enabled(element, false); ``` BREAKING CHANGE: In addition to disabling the children of the element, `$animate.enabled(element, false)` will now also disable animations on the element itself. BREAKING CHANGE: Animation-related callbacks are now fired on `$animate.on` instead of directly being on the element. ```js // < 1.4 element.on('$animate:before', function(e, data) { if (data.event === 'enter') { ... } }); element.off('$animate:before', fn); // 1.4+ $animate.on(element, 'enter', function(data) { //... }); $animate.off(element, 'enter', fn); ``` BREAKING CHANGE: There is no need to call `$scope.$apply` or `$scope.$digest` inside of a animation promise callback anymore since the promise is resolved within a digest automatically (but a digest is not run unless the promise is chained). ```js // < 1.4 $animate.enter(element).then(function() { $scope.$apply(function() { $scope.explode = true; }); }); // 1.4+ $animate.enter(element).then(function() { $scope.explode = true; }); ``` BREAKING CHANGE: When an enter, leave or move animation is triggered then it will always end any pending or active parent class based animations (animations triggered via ngClass) in order to ensure that any CSS styles are resolved in time.
1 parent 73ab107 commit c8700f0

39 files changed

+10237
-7655
lines changed

angularFiles.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,16 @@ var angularFiles = {
8787

8888
'angularModules': {
8989
'ngAnimate': [
90-
'src/ngAnimate/animate.js'
90+
'src/ngAnimate/shared.js',
91+
'src/ngAnimate/animateChildrenDirective.js',
92+
'src/ngAnimate/animateCss.js',
93+
'src/ngAnimate/animateCssDriver.js',
94+
'src/ngAnimate/animateJs.js',
95+
'src/ngAnimate/animateJsDriver.js',
96+
'src/ngAnimate/animateQueue.js',
97+
'src/ngAnimate/animateRunner.js',
98+
'src/ngAnimate/animation.js',
99+
'src/ngAnimate/module.js'
91100
],
92101
'ngCookies': [
93102
'src/ngCookies/cookies.js',

css/angular.css

+8
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,11 @@
99
ng\:form {
1010
display: block;
1111
}
12+
13+
.ng-animate-shim {
14+
visibility:hidden;
15+
}
16+
17+
.ng-animate-anchor {
18+
position:absolute;
19+
}

docs/content/api/index.ngdoc

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ or JavaScript callbacks.
140140
{@link ngAnimate#service Services / Factories}
141141
</td>
142142
<td>
143-
Use {@link ngAnimate.$animate $animate} to trigger animation operations within your directive code.
143+
Use {@link ng.$animate $animate} to trigger animation operations within your directive code.
144144
</td>
145145
</tr>
146146
<tr>

docs/content/guide/animations.ngdoc

+2-2
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ The table below explains in detail which animation events are triggered
253253
| {@link ng.directive:ngClass#animations ngClass or &#123;&#123;class&#125;&#125;} | add and remove |
254254
| {@link ng.directive:ngShow#animations ngShow & ngHide} | add and remove (the ng-hide class value) |
255255

256-
For a full breakdown of the steps involved during each animation event, refer to the {@link ngAnimate.$animate API docs}.
256+
For a full breakdown of the steps involved during each animation event, refer to the {@link ng.$animate API docs}.
257257

258258
## How do I use animations in my own directives?
259259

@@ -276,6 +276,6 @@ myModule.directive('my-directive', ['$animate', function($animate) {
276276

277277
## More about animations
278278

279-
For a full breakdown of each method available on `$animate`, see the {@link ngAnimate.$animate API documentation}.
279+
For a full breakdown of each method available on `$animate`, see the {@link ng.$animate API documentation}.
280280

281281
To see a complete demo, see the {@link tutorial/step_12 animation step within the AngularJS phonecat tutorial}.

src/AngularPublic.js

+4
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@
5757
5858
$AnchorScrollProvider,
5959
$AnimateProvider,
60+
$$CoreAnimateQueueProvider,
61+
$$CoreAnimateRunnerProvider,
6062
$BrowserProvider,
6163
$CacheFactoryProvider,
6264
$ControllerProvider,
@@ -217,6 +219,8 @@ function publishExternalAPI(angular) {
217219
$provide.provider({
218220
$anchorScroll: $AnchorScrollProvider,
219221
$animate: $AnimateProvider,
222+
$$animateQueue: $$CoreAnimateQueueProvider,
223+
$$AnimateRunner: $$CoreAnimateRunnerProvider,
220224
$browser: $BrowserProvider,
221225
$cacheFactory: $CacheFactoryProvider,
222226
$controller: $ControllerProvider,

src/loader.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ function setupModuleLoader(window) {
218218
*
219219
*
220220
* Defines an animation hook that can be later used with
221-
* {@link ngAnimate.$animate $animate} service and directives that use this service.
221+
* {@link $animate $animate} service and directives that use this service.
222222
*
223223
* ```js
224224
* module.animation('.animation-name', function($inject1, $inject2) {

0 commit comments

Comments
 (0)