Angular animation not being applied to child element

user_14186116 0
Viewed 16

So I have two animation over here.

animations: [
    trigger('fadeIn', [
      transition('void => *', [
        style({opacity: 0}),
        animate(500),
      ]),
    ]),
    trigger('fallIn',[
      transition(":enter",[
        style({transform: 'translateY(-20px)'}),
        animate('1s 1s', style({ opacity: 0, transform: "translateX(-100%)" }))
      ])
    ])
  ]

Which are being applied to these two elements.

<div @fadeIn class='intro-window'>
    <div @fallIn class='social-buttons'>
         <a mat-fab color="primary"></a>    
    </div>
</div>

Now the fallIn animation doesn't works. But if I remove the fadeIn from its parent div, the animation works fine.

Should I not apply nested animations. If yes, how should I make it so that first fadeIn also happens and fallIn too in the child element only.

Please make note that I have some other elements between the two so I just cannot apply animation to the whole div. This is just minimum code for issue recreation.

angular typescript animation html
1 Answers

Angular blocks child animations for whatever reason. You need to explicitly execute it from the parent animation using query() and animateChild().

  animations: [
    trigger('fadeIn', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(500),
        query('@fallIn', animateChild()),
      ]),
    ]),
    trigger('fallIn', [
      transition(':enter', [
        style({ transform: 'translateY(-20px)' }),
        animate('1s 1s', style({ opacity: 0, transform: 'translateX(-100%)' })),
      ]),
    ]),
  ],

Stackblitz: https://stackblitz.com/edit/angular-ivy-pzzkqn?file=src/app/app.component.ts

They mention this jank here: https://angular.io/api/animations/animateChild

user_129148330
Related