为什么我的动画不能以角度工作？

Question

main.component.ts

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
  animations: [
    trigger('optionState', [
      state('inactive', style({
        backgroundColor: 'red',
        width: '100px',
        height: '100px'
      })),
      state('active', style({
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      }))
    ])
  ]
})
export class MainComponent implements OnInit {
  public state = "inactive"
  constructor() { }
  ngOnInit() {
  }
  show() {
    this.state = "active"
  }
}

主组件.html

<div [@optionState]="state"
     (click)="show()">
  lol
</div>

包.json

  "dependencies": {
    "@angular/animations": "^4.4.5",
    "@angular/common": "^4.4.5",
    "@angular/compiler": "^4.4.5",
    "@angular/core": "^4.4.5",
    "@angular/forms": "^4.4.5",
    "@angular/http": "^4.4.5",
    "@angular/platform-browser": "^4.4.5",
    "@angular/platform-browser-dynamic": "^4.4.5",
    "@angular/router": "^4.4.5",
  }

好吧，我只是在角度上胡闹，试图让动画工作。但出于某种原因。它没有，我不知道为什么。在我的应用程序模块中，我导入了浏览器动画模块。我正在使用铬浏览器。

编辑 - 顺便说一句，这不会产生任何错误，所以我甚至不知道如何调试它。

Answer 1

您错过了从 * 到 * 状态的过渡动画：

.HTML：

 ...
 animations:[
    trigger('optionState', [
      state('inactive', style({
        backgroundColor: 'red',
        width: '100px',
        height: '100px'
      })),
      state('active', style({
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      })),
      transition('* => *', animate('500ms'))
    ])  
  ]

此外，要恢复初始状态，请执行以下操作：

打字稿：

  show() {
    this.state = this.state == "active" ? "inactive" : "active"
  }

演示