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

fix($animate): make CSS blocking optional for class-based animations #6841

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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