$animateProvider.classNameFilter removing class name for leave event that follows an enter event #11431
Comments
|
Turns out that In the meantime please do use a different className filter value other than |
…ilter Since ngAnimate uses the `ng-animate` CSS class internally to track state it is better to keep this as a reserved CSS class to avoid accidentally adding / removing the CSS class when an animation is started and closed. BREAKING CHANGE: partially or fully using a regex value containing `ng-animate` as a token is not allowed anymore. Doing so will trigger a minErr exception to be thrown. So don't do this: ```js // only animate elements that contain the `ng-animate` CSS class $animateProvider.classNameFilter(/ng-animate/); // or partially contain it $animateProvider.classNameFilter(/some-class ng-animate another-class/); // but this is OK $animateProvider.classNameFilter(/ng-animate-special/); ``` Closes angular#11431
|
@codeniac since the This PR sets the enforcement into place: You'll need to use a different CSS class to special case your "allowed" animations. Sorry for posing a breaking change on your code. Hopefully it won't involve lots of changes. |
…meFilter Since ngAnimate uses the `ng-animate` CSS class internally to track state it is better to keep this as a reserved CSS class to avoid accidentally adding / removing the CSS class when an animation is started and closed. BREAKING CHANGE: partially or fully using a regex value containing `ng-animate` as a token is not allowed anymore. Doing so will trigger a minErr exception to be thrown. So don't do this: ```js // only animate elements that contain the `ng-animate` CSS class $animateProvider.classNameFilter(/ng-animate/); // or partially contain it $animateProvider.classNameFilter(/some-class ng-animate another-class/); // but this is OK $animateProvider.classNameFilter(/ng-animate-special/); ``` Closes angular#11431
…meFilter Since ngAnimate uses the `ng-animate` CSS class internally to track state it is better to keep this as a reserved CSS class to avoid accidentally adding / removing the CSS class when an animation is started and closed. BREAKING CHANGE: partially or fully using a regex value containing `ng-animate` as a token is not allowed anymore. Doing so will trigger a minErr exception to be thrown. So don't do this: ```js // only animate elements that contain the `ng-animate` CSS class $animateProvider.classNameFilter(/ng-animate/); // or partially contain it $animateProvider.classNameFilter(/some-class ng-animate another-class/); ``` but this is OK: ```js $animateProvider.classNameFilter(/ng-animate-special/); ``` Closes angular#11431 Closes angular#11807
I'm building a notification system and i set
to prevent conflict with other components in website. When the animation comes in everything work fine, and ng-enter class provide the animation, but it seems that filter class ng-animate is removed from the div and hence the ng-leave class is not been applied!! With you duplicate the ng-animate class in the component you can work around the problem!! Check out this plunker to see what i'm talking about: http://plnkr.co/edit/7IEgccUvteHFCGiML6Fy?p=preview
The bounce in animation works fine when enter, but when leaving it does not trigger the bounce out animation!
The text was updated successfully, but these errors were encountered: