Skip to content

Commit

Permalink
fix($animate): make CSS blocking optional for class-based animations
Browse files Browse the repository at this point in the history
$animate attempts places a `transition: none 0s` block on the element when
the first CSS class is applied if a transition animation is underway. This
works fine for structural animations (enter, leave and move), however, for
class-based animations, this poses a big problem. As of this patch, instead
of $animate placing the block, it is now the responsibility of the user to
place `transition: 0s none` into their class-based transition setup CSS class.
This way the animation will avoid all snapping and any will allow $animate to
play nicely with class-based transitions that are defined outside of ngAnimate.

Closes angular#6674
Closes angular#6739

BREAKING CHANGE: Any class-based animation code that makes use of transitions
and uses the setup CSS classes (such as class-add and class-remove) must now
provide a empty transition value to ensure that its styling is applied right
away. In other words if your animation code is expecting any styling to be
applied that is defined in the setup class then it will not be applied
"instantly" default unless a `transition:0s none` value is present in the styling
for that CSS class. This situation is only the case if a transition is already
present on the base CSS class once the animation kicks off.
  • Loading branch information
matsko committed Mar 26, 2014
1 parent d6bcbc7 commit 65b81b2
Show file tree
Hide file tree
Showing 4 changed files with 344 additions and 240 deletions.
5 changes: 0 additions & 5 deletions css/angular.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,3 @@
ng\:form {
display: block;
}

.ng-animate-block-transitions {
transition:0s all!important;
-webkit-transition:0s all!important;
}
24 changes: 19 additions & 5 deletions src/ng/directive/ngShowHide.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@
* restating the styles for the .ng-hide class in CSS:
* ```css
* .ng-hide {
* //!annotate CSS Specificity|Not to worry, this will override the AngularJS default...
* /* Not to worry, this will override the AngularJS default...
* display:block!important;
*
* //this is just another form of hiding an element
* /* this is just another form of hiding an element */
* position:absolute;
* top:-9999px;
* left:-9999px;
Expand All @@ -69,10 +69,20 @@
* //a working example can be found at the bottom of this page
* //
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
* transition:0.5s linear all;
* /* this is required as of 1.3x to properly
* apply all styling in a show/hide animation */
* transition:0s linear all;
*
* /* this must be set as block so the animation is visible */
* display:block!important;
* }
*
* .my-element.ng-hide-add-active,
* .my-element.ng-hide-remove-active {
* /* the transition is defined in the active class */
* transition:1s linear all;
* }
*
* .my-element.ng-hide-add { ... }
* .my-element.ng-hide-add.ng-hide-add-active { ... }
* .my-element.ng-hide-remove { ... }
Expand Down Expand Up @@ -109,8 +119,6 @@
</file>
<file name="animations.css">
.animate-show {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
line-height:20px;
opacity:1;
padding:10px;
Expand All @@ -123,6 +131,12 @@
display:block!important;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.animate-show.ng-hide {
line-height:0;
opacity:0;
Expand Down
Loading

0 comments on commit 65b81b2

Please sign in to comment.