<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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 =&gt; onePro-1', [
                animate('0.8s ease-in')
            ]),
            transition('onePro-1 =&gt; onePro-0', [
                animate('0.8s ease-out')
            ])
        ]),
        trigger('amTwo', [
            state('twoPro-0', style({left: 0})),
            state('twoPro-1', style({left: '450px'})),
            transition('twoPro-0 =&gt; twoPro-1', [
                animate('0.8s ease-in')
            ]),
            transition('twoPro-1 =&gt; 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:
&lt;button (click) = 'amOneFn()'&gt;动画测试-amOne&lt;/button&gt;
&lt;div style=&quot;width:500px;height:50px;border: 1px solid #ff6600;position:relative;&quot;&gt;
  &lt;div [@amOne]=&quot;onePro&quot; (@amOne.done)=&quot;amTwoFn($event)&quot; style=&quot;position:absolute;width:50px;height:40px;background:red;left:0px;top:0px;&quot;&gt;amOne&lt;/div&gt;
&lt;/div&gt;

&lt;div style=&quot;width:500px;height:50px;border: 1px solid #ff6600;margin-top:20px;position:relative;&quot;&gt;
  &lt;div [@amTwo]=&quot;twoPro&quot; (@amTwo.done)=&quot;twoEnd($event)&quot; style=&quot;position:absolute;width:50px;height:40px;background:green;left:0px;top:0px;&quot;&gt;amTwo&lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">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 =&gt; onePro-1', [
                animate('0.8s ease-in')
            ]),
            transition('onePro-1 =&gt; onePro-0', [
                animate('0.8s ease-out')
            ])
        ]),
        trigger('amTwo', [
            state('twoPro-0', style({left: 0})),
            state('twoPro-1', style({left: '450px'})),
            transition('twoPro-0 =&gt; twoPro-1', [
                animate('0.8s ease-in')
            ]),
            transition('twoPro-1 =&gt; 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:
&lt;button (click) = 'amOneFn()'&gt;动画测试-amOne&lt;/button&gt;
&lt;div style="width:500px;height:50px;border: 1px solid #ff6600;position:relative;"&gt;
  &lt;div [@amOne]="onePro" (@amOne.done)="amTwoFn($event)" style="position:absolute;width:50px;height:40px;background:red;left:0px;top:0px;"&gt;amOne&lt;/div&gt;
&lt;/div&gt;

&lt;div style="width:500px;height:50px;border: 1px solid #ff6600;margin-top:20px;position:relative;"&gt;
  &lt;div [@amTwo]="twoPro" (@amTwo.done)="twoEnd($event)" style="position:absolute;width:50px;height:40px;background:green;left:0px;top:0px;"&gt;amTwo&lt;/div&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
The following link is my demo:<br>
<a href="https://plnkr.co/edit/Kg1ecShchXeqnscFUyfX?p=preview" rel="nofollow">https://plnkr.co/edit/Kg1ecShchXeqnscFUyfX?p=preview</a></p>
<p dir="auto">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.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
I hope the animations in the finished callback of previous animation can be excuted.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X</p>

</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all ]</p>

</li>
<li>
<p dir="auto"><strong>Language:</strong> [TypeScript 2.0]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x ] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Animation callbacks, done and start, are called in the root zone rather than being called back with the zone created by angular.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Animation callbacks are run inside of the zone created by angular.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
<a href="http://plnkr.co/edit/kgh5fFSWIaNr2ra9hvX0?p=preview" rel="nofollow">http://plnkr.co/edit/kgh5fFSWIaNr2ra9hvX0?p=preview</a><br>
The zone of the callback is logged in the console.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Since the callbacks are meant to be back inside of the Angular application it seems to make sense that the callback should be run inside of NgZone.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Not platform specific</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X</p>

</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all ]</p>

</li>
<li>
<p dir="auto"><strong>Language:</strong> [all]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>