Disable Animations

Sometimes we want to disable an animation when certain conditions are met. For example: when devices are low performing, when browsers are old, or when a user has their system setting set to minimize the amount of nonessential motion (prefers-reduced-motion media query). Angular provides us with three ways to disable its animations.

Note: The methods discussed in this lesson only apply to animations created using Angular animations. This wouldn’t affect animations created using other methods such as CSS or Web animation APIs.

Approach 1: @.disabled property

The @.disabled property is a special animation trigger that disables all its children’s animations. The @.disabled property can be bound to an expression to conditionally disable and enable its children’s animations, defaulting to true if no expression is passed in.

This property disables all the animation on the element itself and all the children of the element, including those that are rendered from within a router outlet. Internally, @.disabled adds or removes the .ng-animate-disabled class of the attached element. This gives Angular the control to dynamically disable and enable animations to any section of the application contained within the target element.

Example

Let’s create an element that fades and slides up as it ...