Repository: angular
Issue: Animations - child element triggers not performing easing
Labels: type: bug/fix,area: animations,freq2: medium,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>
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Performance issue
[ ] 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
[ ] Other... Please describe:
</code></pre>

## Current behavior
<!-- Describe how the issue manifests. -->
Given an `<a>` with a `slide` trigger, transition appropriately performs easing. However, a `<span>` inside of the `<a>` with a `reveal` trigger performs no easing at all. It simply transitions between style states.

## Expected behavior
<!-- Describe what the desired behavior would be. -->
Transitions between styling in the `reveal` trigger should be animated with the easing specified in the `transition` function.

## 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://stackblitz.com or similar (you can use this template as a starting point: https://stackblitz.com/fork/angular-gitter).
-->

``` html
<a mat-list-item [routerLink]="link"
                 routerLinkActive="active"
                 [@slide]="state"
                 [matTooltip]="label"
                 [matTooltipPosition]="tooltipPosition"
                 [matTooltipDisabled]="state !== 'thin'">
  <mat-icon>{{icon}}</mat-icon>
  <span [@reveal]="state">{{label}}</span>
</a>
```

``` ts
animations: [
  trigger(
    'slide', [
      state('collapse', style({
        width: 0,
        opacity: 0,
      })),
      state('thin', style({
        width: '*',
        opacity: 1
      })),
      state('full', style({
        width: '*',
        opacity: 1
      })),
      transition('collapse => thin', animate('100ms ease-out')),
      transition('full => collapse', animate('100ms ease-in'))
    ]
  ),
  trigger(
    'reveal', [
      state('collapse', style({
        width: 0,
        opacity: 0,
        'margin-left': 0,
        'margin-right': 0
      })),
      state('thin', style({
        width: 0,
        opacity: 0,
        'margin-left': 0,
        'margin-right': 0
      })),
      state('full', style({
        width: '*',
        opacity: 1,
        'margin-left': '15px',
        'margin-right': '10px'
      })),
      transition('thin => full', animate('100ms ease-out')),
      transition('full => collapse', animate('100ms ease-in'))
    ]
  )
]
```

[Example Stackblitz](https://stackblitz.com/edit/child-trigger-easing-broken?file=app%2Fcomponents%2Fsidepanel%2Fpanel-link.component.ts)  

[Example Stackblitz](https://stackblitz.com/edit/transition-easing-issues?file=app%2Fcomponents%2Fsidepanel%2Fpanel-link.component.css) showing using CSS transitions to accomplish what the above should look like.

## What is the motivation / use case for changing the behavior?
<!-- Describe the motivation or the concrete use case. -->
Should be able to use angular animations without resorting to CSS transitions directly.

## Environment

<pre><code>
Angular version: 6.0.1
<!-- Check whether this is still an issue in the most recent Angular version -->

Browser:
- [x ] Chrome (desktop) version XX
- [ ] 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