Why animations in animation callback can not excuted?

I’m submitting a … (check one with “x”)

My code is:
import { 
  Component, 
  OnInit,
  animate,
    transition,
    trigger,
    state,
    style } from '@angular/core';

@Component({
  selector: 'app-index',
  templateUrl: 'index.component.html',
  styleUrls: ['index.component.css'],
  animations: [
        trigger('amOne', [
            state('onePro-0', style({left: 0})),
            state('onePro-1', style({left: '450px'})),
            transition('onePro-0 => onePro-1', [
                animate('0.8s ease-in')
            ]),
            transition('onePro-1 => onePro-0', [
                animate('0.8s ease-out')
            ])
        ]),
        trigger('amTwo', [
            state('twoPro-0', style({left: 0})),
            state('twoPro-1', style({left: '450px'})),
            transition('twoPro-0 => twoPro-1', [
                animate('0.8s ease-in')
            ]),
            transition('twoPro-1 => twoPro-0', [
                animate('0.8s ease-out')
            ])
        ])
    ]
})

export class IndexComponent implements OnInit {
  private winObj: any;
  onePro: string = 'onePro-0';
  twoPro: string = 'twoPro-0';

  constructor(){
  }

  amOneFn()
  {
    this.onePro = this.onePro == 'onePro-1' ? 'onePro-0' : 'onePro-1';
  }

  amTwoFn(e)
  {
        console.log('amOneEnd', e);
        if (e.fromState != 'void') {
            console.log(this.twoPro);
            this.twoPro = this.twoPro == 'twoPro-1' ? 'twoPro-0' : 'twoPro-1';
            console.log(this.twoPro);
        }

  }

  twoEnd(e)
  {
      console.log('amTwoEnd', e);
  }

  amTwoFn2()
  {
     this.twoPro = 'twoPro-0';
  }
}

index.component.html:
<button (click) = 'amOneFn()'>动画测试-amOne</button>
<div style="width:500px;height:50px;border: 1px solid #ff6600;position:relative;">
  <div [@amOne]="onePro" (@amOne.done)="amTwoFn($event)" style="position:absolute;width:50px;height:40px;background:red;left:0px;top:0px;">amOne</div>
</div>

<div style="width:500px;height:50px;border: 1px solid #ff6600;margin-top:20px;position:relative;">
  <div [@amTwo]="twoPro" (@amTwo.done)="twoEnd($event)" style="position:absolute;width:50px;height:40px;background:green;left:0px;top:0px;">amTwo</div>
</div>

Current behavior The following link is my demo: https://plnkr.co/edit/Kg1ecShchXeqnscFUyfX?p=preview

When i click the button ‘TestAnimation’ first, the green block (amTwo) can’t excute the animation.I don’t know what’s wrong in my code.

Expected behavior I hope the animations in the finished callback of previous animation can be excuted.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 2.0.X

• Browser: [all ]

• Language: [TypeScript 2.0]

• Node (for AoT issues): node --version =

[jordic]

Not sure why, but seems that the change detector is not triggerd (I’m not an expert on it, but I think that somehting observable, should be there to let the changedetector know that something had changed).

I forked your plnkr, and forcing a render (on the event), seems the behaviour you look for is working. But still not sure if this an issue or not. (But in case, if this is a issue is related to the changedtector)

My plnkr.co with the same working. https://plnkr.co/edit/hcorqwqiscVTavgOqmqB?p=preview

[DzmitryShylovich]

Can you pls provide working reproduction in plunkr?