Angular 4动画过渡意外行为

Question

使用Angular 4.3和Angular 4.3 Animations包，多重过渡动画中的最后一个过渡似乎不会触发。这就是柱塞：

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'))
  ])
]

​

它也是从文档齐全的课件中逐字提升出来的，在这些课件中我看到它与Angular 4.0一起工作。我查看了发布说明，4.3动画包中应该没有任何功能更改。我正在使用@angular/cli。如果我遗漏了什么，我会很感激的，如果4.3中的动画语法有一些变化，如果有人能告诉我它在文档中的位置，那就太好了。

谢谢你的帮助。

编辑:我支持Vega的回答，它清楚地表明，需要一个角度-外部延迟才能返回到初始状态。我的误解是认为角度转换是按顺序执行的。这是更新后的柱塞器，其中包含直接来自相关课件的工作示例。我误解了这件事，我的错。

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

Answer 1

单击后，changMe值被固定为“active”值。将其更改为：

<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);
}

希望这能有所帮助