Repository: angular
Issue: Animation callbacks fire even if the animation itself is not performed
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. -->
I use angular animations.
If i have a parent item animation, its child items' animations are blocked as intended, but the child items animations' <code>.done</code> callbacks are executed.

## Expected behavior
<!-- Describe what the desired behavior would be. -->

If the animation is skipped then its callbacks should also be skipped.

## 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).
-->
Controller fragment:
```
@Component({
    selector: 'task-list',
    templateUrl: 'task-list.html',
    animations: [
        trigger('fadeInOut', [
            state('void', style({ opacity: '0',  height: 0 })),
            state('*', style({ opacity: '1' ,  height: '2.6em'})),
            transition('void => *', animate('2000ms'))
        ]),
        trigger(
            "blockInitialRenderAnimation",
            [
                transition( ":enter", [] )
            ]
        )
    ]
})
export class TaskListComponent {
...
```
Template fragment:
```
...
<ion-list class="tasks__list-completed" 
    [@blockInitialRenderAnimation] 
    (@blockInitialRenderAnimation.done)="blockInitialRenderAnimationDone()"
>
        <ion-item-sliding 
		*ngFor="let task of taskList.completedTasks" #slidingItem
                 [@fadeInOut] 
		(@fadeInOut.done)="completedTaskFadeInDone($event, task, slidingItem)"
	>
...
```

## What is the motivation / use case for changing the behavior?
<!-- Describe the motivation or the concrete use case. -->

I want to animate only new items in a list. For this purpose i block the existing items' animation on first load by adding empty animation on the parent element (the list itself). I also need to use child items animation callbacks for some logic but only when the animation actually happens.


## Environment
<pre><code>
Angular version:
 @angular/animations": "^5.2.10",
"@angular/core": "^5.1.0",

<!-- Check whether this is still an issue in the most recent Angular version -->

Browser:
- [X] Chrome (desktop) version  65.0.3325.181
- [ ] 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:
Ionic (3.20)
<!-- Anything else relevant?  Operating system version, IDE, package manager, HTTP server, ... -->
</code></pre>