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

Enforce a best practice on the ng-animate CSS class #11807

Closed
wants to merge 2 commits into from

Conversation

matsko
Copy link
Contributor

@matsko matsko commented May 5, 2015

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:

// 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 #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
$animateProvider.classNameFilter(/ng-animate-special/);
```

Closes angular#11431
@mgol
Copy link
Member

mgol commented May 6, 2015

👍

@matsko matsko closed this in 1002b80 May 7, 2015
netman92 pushed a commit to netman92/angular.js that referenced this pull request Aug 8, 2015
…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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

$animateProvider.classNameFilter removing class name for leave event that follows an enter event
4 participants