爲什麼我的動畫不是以角度工作的？

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

main.component.html

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

的package.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", 
    } 

好吧，我只是梅辛周圍角試圖獲得動畫工作。但出於某種原因。它不是，我不知道爲什麼。在我的應用程序模塊中，我導入了BrowserAnimationsModule。我正在使用Chrome瀏覽器。

編輯 - 順便說一句，這沒有產生任何錯誤，所以我不知道如何去調試這個。

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

DEMO