Анимации: свойство непрозрачности не применяется

Question

Я сделал очень простую анимацию: при нажатии на элемент div он должен свернуться / развернуться и отобразить другой контент.

Я смоделировал поведение здесь: https://stackblitz.com/edit/animations-opacity-issue?file=src/app/app.component.ts

Когда вы нажимаете на div, он рухнет, как и ожидалось, но чирок div должен исчезнуть, а малиновый div должен исчезнуть.

В настоящее время никто не работает, и я не знаю почему.

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;
}

Answer 1

Вы должны использовать animateChild (https://angular.io/api/animations/animateChild),, поэтому они анимируются в тех же ключевых кадрах

animateChild

Выполняет запрашиваемый внутренний элемент анимации в последовательности анимации.

и group (https://angular.io/api/animations/group) вашей анимации, поэтому они выполняются одновременно

group

Определяетсписок шагов анимации, которые должны выполняться параллельно.

CODE:

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

Вот ваш пример с caggnes: 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;
}

В этой заметке я обнаружил несколько ошибок в github, которые имеют дело с вложенными анимациями:

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

, так что это шов, вложениеанимации с одним и тем же триггером глючат.

Я получил вдохновение здесь: https://docs.w3cub.com/angular/api/animations/animatechild/ и здесь: Angular 5 родительских и дочерних анимаций не работают одновременно

В целом это была боль ....