Angular 2+ multiple animation randomly fails

Question

I need multiple divs to fade out at the same time.

The animation has been implemented to 10 different divs.

When animation is triggered, it works perfectly fine except it won't work for 1 div with identical code.

Here's animation code:

   trigger('fadeInOut', [
  state('hide', style({
    opacity: 0,
    display: 'none'
  })),
  state('display', style({
    opacity: 1,
    display: 'inline'
  })),
  transition('display => hide', animate('100ms ease-out')),
  transition('hide => display', animate('100ms ease-out'))  
])

And here is html part

        <a href="#" class="list-group-item" data-parent="#sidebar">
            <div class="icon-container">
                <i class="fa fa-briefcase"></i>
            </div>
            <div class="fadable" [@fadeInOut]='fadeState'>
                <span>Projects</span>
                <span class="expand-icon">
                    <i class="fa fa-plus-square-o"></i>
                </span>
            </div>
        </a>

and there are other 10 anchors with same code...

Can anyone help?

Answer 1

I had the same problem for days and now I fixed it for me. I also had two elements where the same animation trigger has been set. The first one animated correctly but the other did not even start. (And had the class 'ng-animate-queued' assigned)

The problem in my case was that at the same time, the second element had to be animated (@bounce), the parent container also played an animation (@galleryShadow) which forced the inner element to wait (probably performance decision by the Angular animation engine?).

Since I found a possible solution here Angular Animations: Animate Parent and Child Elements. I tried to group my outer animation to query the inner trigger and called animateChild() for it.

It fixed my problem. Maybe it can help you or any other person facing this behaviour (like me).

trigger('galleryShadow', [
  state('stage-chosen', style({ display: 'none', transform: 'translateX(100%)' })),
  state('compare-chosen', style({ display: 'none', transform: 'none' })),
  state('presenting', style({ display: '*', transform: 'translate(50%)' })),

  transition('compare-chosen => presenting', [
      style({ display: '*', transform: 'translateX(100%)' }),
      group([
        query('@bounce', animateChild()),
        animate('200ms ease-out')
      ]),
    ]
  ),
  transition('stage-chosen => presenting', [
      style({ display: '*' }),
      group([
        query('@bounce', animateChild()),
        animate('200ms ease-out')
      ]),
    ]
  ),
  transition('presenting => stage-chosen', animate('400ms ease-in')),
  transition('presenting => compare-chosen', animate('400ms ease-in'))
])