html - Angular 2 - 动画过渡不起作用

Question

我需要在两种颜色之间进行转换 OnClick。现在，这是我的代码:

typescript

animations: [
    trigger('menubarState', [
        state('false', style({backgroundColor:'#43a047'})),
        state('true', style({backgroundColor:'#333'})),
        transition('false => true', animate('1s')),
        transition('true => false', animate('1s'))
    ])
]

...

export class MenubarComponent {
  menuActive: boolean = false;
  onMenuClick () {
    if (this.menuActive == false) {
      this.menuActive = true;
    } else {
      this.menuActive = false;
    }
  }
}

HTML

<li [@menubarState]="menuActive" (click)="onMenuClick()">
      <a><span class="material-icons icon">apps</span></a>
</li>

这确实改变了 background-color 。然而，这种变化是即时的，而不是过渡。

我正在使用最新版本的 Chrome。

Answer 1

这让我痛苦了很长时间，解决这个问题的方法是将我的状态变量从 bool 类型更改为字符串类型。所以 - 不是跟踪 true 和 false，而是跟踪 'true' 和 'false'。根据 Angular 的文档:

An animation state is a string value that you define in your application code.

将您的 MenubarComponent 类更改为:

export class MenubarComponent {
  menuActive: string = 'false';
  onMenuClick () {
    if (this.menuActive === 'false') {
      this.menuActive = 'true';
    } else {
      this.menuActive = 'false';
    }
  }
}

我认为这是愚蠢的。 bool 值显然是二进制状态的不错选择。

更多信息:https://angular.io/guide/animations#states-and-transitions