Не работает угловая анимация (нет перехода между состояниями)

Question

Я пытаюсь реализовать теневой фон при открытии меню.

Вот блик стека https://stackblitz.com/edit/angular-xve6ju

Я не понимаю, чего не хватает, оно должно работать, номежду состояниями нет перехода.

Answer 1

ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('fadeInOutAnimation', [
        state('out', style({
          opacity: 0
        })),
        state('in',  style({
          opacity: 1
        })),
        transition('out=>in', [
          animate('5s')
        ])
    ])
  ]
})
export class AppComponent  {
  name = 'Angular';

  currentState = 'out';
  changeState() {
    this.currentState = this.currentState === 'in' ? 'out' : 'in';
  }
}

html:

<div 
*ngIf="isMenuOpen"
(click)="changeState()"
[@fadeInOutAnimation]="currentState"
class="shadow-background"
></div>

<button (click)="isMenuOpen = true">Animate</button>

stackblitz: https://stackblitz.com/edit/angular-qzn3es

Answer 2

У вас есть несколько проблем в вашем коде.

Во-первых, isMenuOpen должен иметь состояния 'out' и 'in', но вы определили его как логическое значение?

Во-вторых, вы указали свой триггер [@fadeInOutAnimation] дважды в вашем html.

Вы также устанавливаете isMenuOpen в значение true с помощью кнопки Animate, что ничего не даст.

Взгляните на этот исправленный рабочий StackBlitz вашего примера.