Permalink
Browse files

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.
  • Loading branch information...
1 parent 73ab107 commit c8700f04fb6fb5dc21ac24de8665c0476d6db5ef @matsko matsko committed Apr 3, 2015
Showing with 10,237 additions and 7,655 deletions.
  1. +10 −1 angularFiles.js
  2. +8 −0 css/angular.css
  3. +1 −1 docs/content/api/index.ngdoc
  4. +2 −2 docs/content/guide/animations.ngdoc
  5. +4 −0 src/AngularPublic.js
  6. +1 −1 src/loader.js
  7. +326 −244 src/ng/animate.js
  8. +2 −2 src/ng/directive/ngClass.js
  9. +34 −2 src/ngAnimate/.jshintrc
  10. +0 −2,130 src/ngAnimate/animate.js
  11. +15 −0 src/ngAnimate/animateChildrenDirective.js
  12. +997 −0 src/ngAnimate/animateCss.js
  13. +218 −0 src/ngAnimate/animateCssDriver.js
  14. +250 −0 src/ngAnimate/animateJs.js
  15. +61 −0 src/ngAnimate/animateJsDriver.js
  16. +551 −0 src/ngAnimate/animateQueue.js
  17. +151 −0 src/ngAnimate/animateRunner.js
  18. +288 −0 src/ngAnimate/animation.js
  19. +508 −0 src/ngAnimate/module.js
  20. +230 −0 src/ngAnimate/shared.js
  21. +4 −3 src/ngMock/angular-mocks.js
  22. +2 −0 test/.jshintrc
  23. +13 −1 test/helpers/privateMocks.js
  24. +11 −0 test/helpers/testabilityPatch.js
  25. +45 −17 test/ng/animateSpec.js
  26. +1 −0 test/ng/directive/formSpec.js
  27. +6 −35 test/ng/directive/ngClassSpec.js
  28. +4 −4 test/ng/directive/ngModelSpec.js
  29. +2 −3 test/ng/directive/ngRepeatSpec.js
  30. +13 −0 test/ngAnimate/.jshintrc
  31. +894 −0 test/ngAnimate/animateCssDriverSpec.js
  32. +2,428 −0 test/ngAnimate/animateCssSpec.js
  33. +178 −0 test/ngAnimate/animateJsDriverSpec.js
  34. +672 −0 test/ngAnimate/animateJsSpec.js
  35. +340 −0 test/ngAnimate/animateRunnerSpec.js
  36. +971 −5,208 test/ngAnimate/animateSpec.js
  37. +135 −0 test/ngAnimate/animationHelperFunctionsSpec.js
  38. +858 −0 test/ngAnimate/animationSpec.js
  39. +3 −1 test/ngRoute/directive/ngViewSpec.js
View
@@ -87,7 +87,16 @@ var angularFiles = {
'angularModules': {
'ngAnimate': [
- 'src/ngAnimate/animate.js'
+ 'src/ngAnimate/shared.js',
+ 'src/ngAnimate/animateChildrenDirective.js',
+ 'src/ngAnimate/animateCss.js',
+ 'src/ngAnimate/animateCssDriver.js',
+ 'src/ngAnimate/animateJs.js',
+ 'src/ngAnimate/animateJsDriver.js',
+ 'src/ngAnimate/animateQueue.js',
+ 'src/ngAnimate/animateRunner.js',
+ 'src/ngAnimate/animation.js',
+ 'src/ngAnimate/module.js'
],
'ngCookies': [
'src/ngCookies/cookies.js',
View
@@ -9,3 +9,11 @@
ng\:form {
display: block;
}
+
+.ng-animate-shim {
+ visibility:hidden;
+}
+
+.ng-animate-anchor {
+ position:absolute;
+}
@@ -140,7 +140,7 @@ or JavaScript callbacks.
{@link ngAnimate#service Services / Factories}
</td>
<td>
- Use {@link ngAnimate.$animate $animate} to trigger animation operations within your directive code.
+ Use {@link ng.$animate $animate} to trigger animation operations within your directive code.
</td>
</tr>
<tr>
@@ -253,7 +253,7 @@ The table below explains in detail which animation events are triggered
| {@link ng.directive:ngClass#animations ngClass or &#123;&#123;class&#125;&#125;} | add and remove |
| {@link ng.directive:ngShow#animations ngShow & ngHide} | add and remove (the ng-hide class value) |
-For a full breakdown of the steps involved during each animation event, refer to the {@link ngAnimate.$animate API docs}.
+For a full breakdown of the steps involved during each animation event, refer to the {@link ng.$animate API docs}.
## How do I use animations in my own directives?
@@ -276,6 +276,6 @@ myModule.directive('my-directive', ['$animate', function($animate) {
## More about animations
-For a full breakdown of each method available on `$animate`, see the {@link ngAnimate.$animate API documentation}.
+For a full breakdown of each method available on `$animate`, see the {@link ng.$animate API documentation}.
To see a complete demo, see the {@link tutorial/step_12 animation step within the AngularJS phonecat tutorial}.
@@ -57,6 +57,8 @@
$AnchorScrollProvider,
$AnimateProvider,
+ $$CoreAnimateQueueProvider,
+ $$CoreAnimateRunnerProvider,
$BrowserProvider,
$CacheFactoryProvider,
$ControllerProvider,
@@ -217,6 +219,8 @@ function publishExternalAPI(angular) {
$provide.provider({
$anchorScroll: $AnchorScrollProvider,
$animate: $AnimateProvider,
+ $$animateQueue: $$CoreAnimateQueueProvider,
+ $$AnimateRunner: $$CoreAnimateRunnerProvider,
$browser: $BrowserProvider,
$cacheFactory: $CacheFactoryProvider,
$controller: $ControllerProvider,
View
@@ -218,7 +218,7 @@ function setupModuleLoader(window) {
*
*
* Defines an animation hook that can be later used with
- * {@link ngAnimate.$animate $animate} service and directives that use this service.
+ * {@link $animate $animate} service and directives that use this service.
*
* ```js
* module.animation('.animation-name', function($inject1, $inject2) {
Oops, something went wrong.

0 comments on commit c8700f0

Please sign in to comment.