This repository has been archived by the owner on Apr 12, 2024. It is now read-only.
ngClass with ngAnimate breaks existing css transitions #6674
Labels
Milestone
Comments
|
"The problem is, ngAnimate in its animateSetup disables the transition with blockTransitions (as a workaround for a bug in Chrome/FF as it claims)." Related to #6675 A temporary work around is to use the important on the transition property. transition-property: all!important; |
matsko
added a commit
to matsko/angular.js
that referenced
this issue
Mar 25, 2014
$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.
matsko
added a commit
to matsko/angular.js
that referenced
this issue
Mar 25, 2014
$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.
matsko
added a commit
to matsko/angular.js
that referenced
this issue
Mar 25, 2014
$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.
matsko
added a commit
to matsko/angular.js
that referenced
this issue
Mar 25, 2014
$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.
matsko
added a commit
to matsko/angular.js
that referenced
this issue
Mar 25, 2014
$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.
matsko
added a commit
to matsko/angular.js
that referenced
this issue
Mar 26, 2014
$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.
matsko
added a commit
to matsko/angular.js
that referenced
this issue
Mar 26, 2014
$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.
matsko
added a commit
to matsko/angular.js
that referenced
this issue
Mar 26, 2014
$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.
matsko
added a commit
to matsko/angular.js
that referenced
this issue
Mar 26, 2014
$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.
|
Fixed. Landed as 1bebe36 |
|
I'm not sure if this is related to this issue or if I should submit a new issue. I'm using both ngClass & ngAnimate with an existing CSS transition, and the result/problem is that the I'm not trying to use Angular animations at all for this element, but I am trying to use it on the same page as some other elements that do use Angular animations, so hence my need to have ngAnimate included as a dependency. See reproduction here: http://plnkr.co/edit/IcesSJdZFVFNO2Jvd8Pd?p=preview Click the button & immediately hover away. In 2 seconds it's supposed to disappear but it doesn't because it has both the "ng-animate" and "ng-hide" classes. Strangely, if you then/later hover over it, it disappears. |
|
Can reproduce this. @danxshap can you open a new issue about that please? |
|
Yup. The animation isn't triggering since there is no animation for ngShow/ngHide, but for some reason the fallback timeout isn't closing it. |
|
New issue opened: #7766 Thank you very much! |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
This shows that by having ng-class on an element that when it is toggled it breaks existing css transitions.
http://plnkr.co/edit/XALhTdtNrn0kpsnQNyEC
The text was updated successfully, but these errors were encountered: