角度4のアニメーションの遷移予期しない動作

Question

角度4.3と角度4.3のアニメーションパッケージを使用すると、複数のトランジションアニメーションの最後のトランジションが発生しないように見えます。ここでPlunkerがある：

私が見てきたすべてのデモやコースウェアで

https://plnkr.co/edit/F3tHn7?p=preview

、divが初期状態に戻す必要がありますが、それはしていません。ここでは、コードです：

HTML：

<div (click)="changeMe = 'active'" 
    [@changeState]="changeMe">Click me</div> 

コンポーネント：

：

//our root app component 
 
import {Component, NgModule, VERSION} from '@angular/core' 
 
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; 
 
import {BrowserModule} from '@angular/platform-browser' 
 
import 'web-animations-js'; 
 

 
import { 
 
    trigger, 
 
    state, 
 
    style, 
 
    animate, 
 
    transition 
 
} from '@angular/animations'; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    templateUrl: 'src/app.html', 
 
    animations: [ 
 
    trigger('changeState', [ 
 
     state('inactive', style({ 
 
     backgroundColor: 'green', 
 
     width: '100px', 
 
     height: '100px' 
 
     })), 
 
     state('active', style({ 
 
     backgroundColor: 'magenta', 
 
     width: '100px', 
 
     height: '50px' 
 
     })), 
 
     transition('inactive => active', animate('1000ms')), 
 
     transition('active => inactive', animate('1000ms')) 
 
    ]) 
 
    ] 
 
}) 
 
export class App { 
 
changeMe = 'inactive'; 
 
} 
 

 
@NgModule({ 
 
    imports: [ BrowserModule, BrowserAnimationsModule ], 
 
    declarations: [ App ], 
 
    bootstrap: [ App ] 
 
}) 
 
export class AppModule {}

これは言うAngular.IO documentationを反映しています

animations: [ 
 
    trigger('heroState', [ 
 
    state('inactive', style({ 
 
     backgroundColor: '#eee', 
 
     transform: 'scale(1)' 
 
    })), 
 
    state('active', style({ 
 
     backgroundColor: '#cfd8dc', 
 
     transform: 'scale(1.1)' 
 
    })), 
 
    transition('inactive => active', animate('100ms ease-in')), 
 
    transition('active => inactive', animate('100ms ease-out')) 
 
    ]) 
 
]

また、私はそれが角4.0で作業を見ているだけでなく、文書化コースウェアから基本的にそのまま持ち上げるます。私はリリースノートをチェックし、4.3のアニメーションパッケージに機能の変更があったはずがありません。私は@ angular/cliを使用しています。私が何か不足している場合、私はポインタを感謝し、4.3でアニメーションの構文にいくつかの変更がある場合は誰かがそれが文書化されている場所に私を指すことができれば素晴らしいだろう。任意の助け

おかげで...

編集：私はそれはそれは明らか角度、外部の遅延が初期状態に戻すために必要とされたと判断ベガの答えをupvotingです。私の誤解は思考にありました角度の遷移は順番に実行されます。ここに更新されたPlunkerが、問題のコースウェアからの直接の実例を示しています。私は、私の悪いことを誤解した。

https://plnkr.co/edit/kkTccN?p=preview

Answer 1

changMe値をクリックした後、 'アクティブ' の値に貼り付けられています。このようにそれを変更します。

<div (click)="change()" 
[@changeState]="changeMe">Click me</div> 

と

change(){ 

    setTimeout(()=>{  
    this.changeMe = this.changeMe== 'active' ? 'inactive' : 'active' 
    },1000); 
    setTimeout(()=>{  
    this.changeMe = this.changeMe== 'active' ? 'inactive' : 'active' 
    },3000); 
} 

ホープこれは

それが働いた場合、私は本当に満足しているだろう