Issue 1:
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 =

Issue 2:
I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Animation callbacks, done and start, are called in the root zone rather than being called back with the zone created by angular.

Expected behavior

Animation callbacks are run inside of the zone created by angular.

Reproduction of the problem

http://plnkr.co/edit/kgh5fFSWIaNr2ra9hvX0?p=preview

The zone of the callback is logged in the console.

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

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.

Please tell us about your environment:

Not platform specific

Angular version: 2.0.X

Browser: [all ]

Language: [all]

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