Question

我正在尝试打开菜单时实现阴影背景。

这是一堆https://stackblitz.com/edit/angular-xve6ju

我不知道缺少什么，它应该可以工作，但是状态之间没有过渡。

Answer 1

您的代码中有一些问题。

首先，isMenuOpen应该具有'out'和'in'状态，但是您已将其定义为布尔值？

第二，您在html中两次指定了触发器[@fadeInOutAnimation]。

您还可以通过Animate按钮将isMenuOpen设置为true，这将什么也没有完成。

看看this修改过的示例工作中的StackBlitz。

Answer 2

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

角动画不起作用（状态之间没有过渡）

2 个答案: