Animations: opacity property not being applied

Question

I have made a very simple animation : on click on a div, it should collapse/expand and display different content.

I have mocked the behavior here : https://stackblitz.com/edit/animations-opacity-issue?file=src/app/app.component.ts

When you click on the div, it collapses as expected, but the teal div should fade out, while the crimson div should fade in.

Currently none work, and I don't know why.

import { Component } from '@angular/core';
import { animate, query, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'my-app',
  template: `
<div class="menu-container" [@menuSize]="isMenuExpanded" (click)="isMenuExpanded = !isMenuExpanded">
  <div style="background-color: teal" *ngIf="isMenuExpanded" @menuVisibility></div>
  <div style="background-color: crimson" *ngIf="!isMenuExpanded" @menuVisibility></div>
</div>
  `,
  styles: [`
.menu-container {
  height: 100%;
  background: coral;
  width: 300px;
  position: relative;
}

.menu-container div {
  height: 200px;
  width: 100%;
  position: absolute;
}
`],
    animations: [
    trigger('menuSize', [
      state('true', style({ width: '*' })),
      state('false', style({ width: '100px' })),
      transition('true <=> false', [
        animate('500ms ease-in-out'),
      ]),
    ]),
    trigger('menuVisibility', [
      state('*', style({ opacity: '1' })),
      state('void', style({ opacity: '0' })),
      transition(':enter', [animate('300ms ease-in-out')]),
      transition(':leave', [animate('300ms 500ms ease-in-out')])
    ])
  ],
})
export class AppComponent  {
  isMenuExpanded = true;
}

Stefan · Accepted Answer · 2019-02-14T14:05:14.417

You have to use animateChild (https://angular.io/api/animations/animateChild), so are animated in the same keyframes

animateChild

Executes a queried inner animation element within an animation sequence.

and group (https://angular.io/api/animations/group) your animations, so they are executed at the same time

group

Defines a list of animation steps to be run in parallel.

CODE:

 transition('true <=> false', group([
        query('@menuVisibility', [
          animateChild()
        ], {optional: true}),        
        animate('3s'),
      ]))

Here is your example, with the cahgnes: https://stackblitz.com/edit/animations-opacity-issue-exycbu:

import { Component } from '@angular/core';
import { animate, query, state, style, transition, trigger, animateChild, group } from '@angular/animations';

@Component({
  selector: 'my-app',
  template: `
<div class="menu-container" [@menuSize]="isMenuExpanded" (click)="isMenuExpanded = !isMenuExpanded">
  <div style="background-color: teal" *ngIf="isMenuExpanded" @menuVisibility>teal</div>
  <div style="background-color: crimson" *ngIf="!isMenuExpanded" @menuVisibility>crimson</div>
</div>
  `,
  styles: [`
.menu-container {
  height: 100%;
  background: coral;
  width: 300px;
  position: relative;
}

.menu-container div {
  height: 200px;
  width: 100%;
  position: absolute;
}
`],
    animations: [
    trigger('menuSize', [
      state('true', style({ width: '300px' })),
      state('false', style({ width: '100px' })),
      transition('true <=> false', group([
        query('@menuVisibility', [
          animateChild()
        ], {optional: true}),        
        animate('3s'),
      ]))
    ]),
    trigger('menuVisibility', [
      state('*', style({ opacity: '1' })),
      state('void', style({ opacity: '0' })),
      transition(':enter', [animate('3s')]),
      transition(':leave', [animate('3s')])
    ])
  ],
})
export class AppComponent  {
  isMenuExpanded = true;
}

On this note, I found some bugs in github which deal with nested animations:

https://github.com/angular/angular/issues/20811

so it seams, the nesting of animations with the same trigger is buggy.

I got the insperation from here: https://docs.w3cub.com/angular/api/animations/animatechild/ and here: Angular 5 parent and child animations not working at the same time

All in all this was a pain....

Sorry, I didn't get a notification about your answer. I see that it indeed works, thank you for the information, didn't even know that `animateChild` property ! — , Feb 20 '19 at 11:34
In the case of deeply nested animations, would I need to use `animateChild` several times, or is one time enough ?(if you know the answer already) — , Feb 20 '19 at 11:35
Hey, thanks for the approval. No I don't know, and am not sure if animations are intended to be that deeply nested. All examples I found on the angular demo site are not nested at all. Not sure if in this case an external animation library such as Tweenmax would be better. There I created an animted Banner, which moved, faded etc different elements based on a Timeline. Don't know how well it integrates with angular... — Stefan, Feb 20 '19 at 11:55

Animations: opacity property not being applied

1 Answers1