ngAnimate automatically adding unwanted enter/leave transitions to ngRepeat items

[andymerskin]

Hey everyone!

I have a fairly simple image gallery with filters above that are updating the ngRepeat's model upon changing the filter criteria. Whenever the model changes, the repeater updates, new elements are added, and the other elements are removed.

Problem is, ngAnimate (being used in another area of the page), is automatically adding enter/leave animations to my repeater's elements, even though I haven't declared any classes on those elements, like .ng-enter and .ng-leave.

I do have transitions specified on those elements, but I'm using those for sliding the gallery using transforms.

Is there any explicit way to prevent ngAnimate from affecting certain elements?

Thanks!

[matsko]

Yeah this is an issue with ngAnimate since the best practice is to avoid animating on the root CSS class, but it sounds better on paper than it works. There are cases where the base CSS class (or any other CSS class on the element) may already have transition code.

To get around this, simple disable transition the .ng-enter / .ng-leave (or even .ng-animate CSS classes on the element). Then when ngAnimate does a detection on the element it will skip the enter / leave animations.

/* don't worry about inheritance or spill over onto your own transtion code,
   these classes are here for only a millisecond for detection purposes */
.my-gallery-item.ng-enter,
.my-gallery-item.ng-leave {
  --webkit-transition: none;
  transition: none;
} 

/* Or you can use this if you're crazy enough to disable ALL ngAnimate transition animations */
.my-gallery-item.ng-animate {
  --webkit-transition: none;
  transition: none;
}

/* Use `none 0s` to disable keyframe animations */
.my-gallery-item.ng-animate {
  --webkit-animation: none 0s;
  animation: none 0s;
}

You may need to use !important incase your own CSS styles are of higher specificity than the simple compounded CSS selectors that are used in the CSS code above.

[andymerskin]

I had an inkling I would need to override those classes, but I wasn't sure if it was a good solution or not since you're having to fight against ngAnimate rather than disable it completely for certain elements.

I'll give this a shot on my project. Thanks for getting back to me on this!

[matsko]

Ya it kinda sucks at the moment. Still trying on figuring out a sure-fire way to detect if you have set a transition/keyfame animation by actually defining a CSS class.

[BjornFridal]

Thanks for showing how to disable ngAnimate all together for certain elements. I have spend hours trying to bend ngAnimate to my will, but disabling it for part of my app, is much, much easier.

[matsko]

You can also use $animateProvider.classNameFilter so that ngAnimate will only attempt to perform a CSS transition/animation on specific classNames instead of all elements.

[BjornFridal]

Great, that's even better. Thanks :)