angular: [Animations, Angular 5] inner element is not animated

Just in case anyone stumbles on this issue again: If you want both animations to play at the same time you simply need to use group and animateChild. Basically, in the plunker linked in the first post you have to replace outerTransition with the following:

const outerTransition = transition('void => *', [
  style({opacity: 0}),
  group([
    animate(2000, style({opacity: 1})),
    query('@inner', [
      animateChild()
    ]),
  ]),
]);

@silvanaweb @Pedro-vk here is solution which worked for me: https://embed.plnkr.co/vXhLXOMWYzWkJ8DgMvrI/

I’ve added trigger to the parent of parent element:

trigger('nested', [
  transition('* => *', [
    query('@*', animateChild(), {optional: true})
  ])
]),

It’s selecting all of the nested animations and applying animateChild behavior.

I noticed that when nesting components with animations, the names of the states have to be unique. Otherwise transitions might be executed even when these are disabled.

So you can’t have state ‘active’ in the parent and at the same time state ‘active’ in any of the children. Renaming the state of the child to something else fixed the problem for me.

I’m not sure if this is intended behaviour or a bug in Angular.

Angular 11.x here. This is still the case cheers flash ⚡

I noticed that when nesting components with animations, the names of the states have to be unique. Otherwise transitions might be executed even when these are disabled.

So you can’t have state ‘active’ in the parent and at the same time state ‘active’ in any of the children. Renaming the state of the child to something else fixed the problem for me.

I’m not sure if this is intended behaviour or a bug in Angular.

Definitely check out animateChild()

Here’s an example where two animations happen in sequence. Notice that the order in the transition array determines if the child animation gets fired first or after.

In this case when going from inactive > active the parent container animates first. But when going back to inactive the reverse happens and the child inmates then the parent.

The elements in the transition array happen sequentially - so that the the 2nd one waits for the first to finish before animating. As @MrWolfZ says putting them in a group will do them sequentially.

...
    trigger('containerState', [
      state('inactive', style({ height: '0' })),
      state('active', style({ height: '*' })),
      transition('inactive => active', [
        animate('150ms ease-in-out'),
        query('@innerState', [
          animateChild(),
        ])
      ]),
      transition('active => inactive', [
        query('@innerState', [
          animateChild(),
        ]),
        animate('150ms ease-in-out'),
      ])
    ]),
    trigger('innerState', [
      state('inactive', style({ opacity: 0, transform: 'translateY(-100%)' })),
      state('active', style({ opacity: 1, transform: 'translateY(0)' })),
      transition('inactive => active', [
        animate('150ms ease-in-out'),
      ]),
      transition('active => inactive', [
        animate('150ms ease-in-out'),
      ])
    ]),
...

<div class="container"
  [@containerState]="state">
  <div class="innerContainer" [@innerState]="state">
    Blah
  </div>
</div>

Hi, I have tried all the suggested solutions, but none works, the child does not animate 😦

Also works as expected with the version set to 5.0.2, but breaks in 5.0.3.

@silvanaweb I don’t see a reason why it shouldn’t apply. Just do this:

const parentAnimation = trigger('animateParent', [
  transition('void => *', [
    style({opacity: 0}),
    group([
      animate(2000, style({opacity: 1})),
      query('@animateChild', [
        animateChild()
      ]),
    ]),
  ]);
])

As @jamesthurley sais, I’ve fixed the version to 5.0.2 and it works fine.

I might have something similar, related: https://github.com/angular/angular/issues/20811

I have a nested animation that should be delayed, but is executed at the same time as the parent animation. This worked fine in A 4.4.2 but fails in 5.0.5