Repository: angular
Issue: [Animations, Angular 5] Nested [@triggerName] fires when parent trigger is executed. Animation executes before its turn
Labels: type: bug/fix,area: animations,freq1: low,P3

<!--
PLEASE HELP US PROCESS GITHUB ISSUES FASTER BY PROVIDING THE FOLLOWING INFORMATION.

ISSUES MISSING IMPORTANT INFORMATION MAY BE CLOSED WITHOUT INVESTIGATION.
-->

## I'm submitting a...
<!-- Check one of the following options with "x" -->
<pre><code>
[ X ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre>

## Current behavior
The issue in a nutshell: A nested @trigger animates when the parent animates, ignoring it's delay.

In the following SVG ( a lock), I have added animated parts to move it's elements and change the colour during the animation.
Right now, when the top lock part close (moves down) the child animation on the path fires too, while I have programmed it to wait 900ms before executing.

![dec-06-2017 09-54-46](https://user-images.githubusercontent.com/5285035/33635350-b7385b62-da6b-11e7-9f29-b88bcbc884bc.gif)

As you can see in the GIF, the top lock part turns red at the same time it slides down. Then the rest of the lock turns red later. They all use the same `@fillState` trigger, however the top part runs at the same time as it `@lockState` is executed. 
It needs to 1) close the lock, 2) and then change colour. Not at the same time.
This was working in Angular 4.4.2

```
<svg class="icon-lock-open" viewBox="0 0 46 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <polygon id="path-1" points="0.412 0.329 29.234 0.329 29.234 25.9964355 0.412 25.9964355"></polygon>
            <polygon id="path-3" points="45.762 15.941 45.762 31.846 0 31.846 0 0.036 45.762 0.036"></polygon>
        </defs>
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g>
            <g transform="translate(7.830000, 0.000000)" [@lockState]="state">
              <path  id="lock-top" fill="#38B872" [@fillState]="state"  fill-rule="nonzero" d="M6.1862"></path>
            </g>
            <path id="lock-base-overlay" fill="#E8E9E8" [@lockFillState]="state" fill-rule="nonzero" d="M27.02"></path>
            <g transform="translate(0.000000, 25.230000)">
                <path id="lock-base" fill="#38B872" [@fillState]="state" fill-rule="nonzero" d="M3.255,"></path>
            </g>
            <path id="lock-key-hole" fill="#38B87`2" [@fillState]="state" fill-rule="nonzero" d="M26.8"></path>
          </g>
        </g>
 </svg>
```

```
  animations: [
    trigger( 'lockState', [
      state( 'open', style( {
        transform: 'translate3d( 7.83px, 0, 0)',
        // transform: 'scale(1)',
      } ) ),
      state( 'locked', style( {
        transform: 'translate3d( 7.83px, 5px, 0)',
      } ) ),
      transition( 'open => locked', animate( '100ms 500ms linear' ) ),
      // transition( 'locked => open', animate( '100ms ease-out' ) ),
    ] ),
    // lock part that turns from green to white
    //
    trigger( 'fillState', [
      state( 'open', style( {
        fill: '#38B872',
      } ) ),
      state( 'locked', style( {
        fill: 'red',

      } ) ),
      transition( 'open => locked', animate( '300ms 900ms linear' ) ),
    ] ),
   .... ]
```


## Expected behavior
The @lockState trigger animates first, closing the lock, then the @fillState animation executes (since it is delayed by 900ms). The lock turns from green into red (normally it would be white colour, just for testing).


## Minimal reproduction of the problem with instructions
<!--
For bug reports please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
-->
I will try adding a plunker later.

## What is the motivation / use case for changing the behavior?
Well, I had the animation working in Angular 4.4.2. Now that I have migrated to Angular 5.0.5 the animation is working differently. I can try to create separate @triggerStates or play with groups, but I want to make sure that what I am seeing is not a bug.


## Environment

<pre><code>
Angular version: 5.0.5
<!-- Check whether this is still an issue in the most recent Angular version -->

Browser:
- [ X ] Chrome (desktop) version 62.0.3202.94
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  <!-- run `node --version` -->
- Platform:  <!-- Mac, Linux, Windows -->

Others:
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>