Activate/Deactivate Angular 6 animations

Question

Is there any way I can "disable" Angular animations until certain event?

For example, I have a listbox with some items. Each item has an animation like this:

<div class="list--item" [@animFadeOut]>
  [ ... ]
</div>

To avoid visual overload, I'd like that this animation would be played only when a new item is added, not when the list is loaded and populated with all the items.

What would be a good way of achieving this effect?

Thanks,

score 0 · Accepted Answer · answered Oct 02 '18 at 15:34

It would be easier if you provided a jsfiddle example, but you can do this by adding a state name to your animation only when you need it (it's your call to switch the value of firstLoadFinished when needed) :

<div class="list--item" [@animFadeOut]="firstLoadFinished ? 'newItemAdded' : 'active'">
  [ ... ]
</div>

Then your animation could look like :

trigger('animFadeOut', [
    state(
        'void',
        style({
            opacity: 0
        })
    ),
    state(
        'active, newItemAdded',
        style({
            opacity: 1
        })
    ),
    transition('void => active', animate('0ms')),
    transition('void => newItemAdded', animate('500ms')),
    transition('* => void', animate('300ms'))
])

That was exactly what I needed! Thanks! – Fel Oct 03 '18 at 06:33 — Fel, Oct 03 '18 at 06:33

Activate/Deactivate Angular 6 animations

1 Answers1