なぜ私のアニメーションは角張っているのですか？

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

[OK]を、私はちょうどにいじりいますアニメーションを取得しようとする角度働くこと。しかし何らかの理由で。そうではありませんが、なぜ私は考えていません。私のアプリケーションモジュールでは、BrowserAnimationsModuleをインポートしました。私はクロムブラウザを使用しています。

EDIT - btwこれはエラーを発生させないため、これをデバッグする方法についてもわかりません。

Answer 1

あなたは*状態へ*からの移行アニメーションを欠場：

活字体：

初期状態を戻すために、また

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

：

HTMLを

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

DEMO