Question

使用Angular 4.3和Angular 4.3 Animations软件包，似乎多转换动画中的最后一个转换不会触发。这是Plunker：

在我看过的所有演示和课件中，div应该返回到初始状态，但事实并非如此。这是代码：

HTML：

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

组件：

＆＃13;

//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 {}

＆＃13;

这反映了Angular.IO documentation说：

＆＃13;

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

＆＃13;

它也基本上逐字逐句地从有充分记录的课件中提升，我看到它与Angular 4.0一起使用。我检查了发行说明，并且4.3动画包中不应该有任何功能更改。我正在使用@ angular / cli。如果我遗漏了任何东西，我会感激指针，如果4.3中的动画语法有一些变化，如果有人能指出我所记录的位置，它会很棒。

感谢您的帮助......

编辑：我正在回应Vega的答案，它明确表示需要Angular-external延迟才能返回初始状态。我的误解在于认为Angular过渡是按顺序执行的。这是更新的Plunker，其中的工作示例直接来自相关课件。我误解了这件事，我的不好。

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

Answer 1

changMe值坚持“活跃”＆＃39;点击后的价值。改变它：

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

希望这有帮助

Angular 4动画转换意外行为

1 个答案: