Angular 4動畫轉換出乎意料的行爲

Question

使用Angular 4.3和Angular 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 Vega的回答它使人們清楚地意識到需要一個角外用延時恢復到初始狀態。我的誤解在於思考角度轉換是按順序執行的。這裏是更新的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); 
} 

希望這有助於