Animation query parameter does not work properly

[Ledzz]

I'm submitting a ...

[ ] Regression (behavior that used to work and stopped working in a new release)
[x] Bug report 
[ ] 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

Current behavior

All child query(':enter') transitions work

Expected behavior

Only first query(':enter') transition works

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/qaJpj4Maf0QobAv8bXe6?p=preview
Click Toggle button. All Bar elements should animate, but this doesn't happen.

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

Please tell us about your environment

Angular version: 4.2.3


Browser:
- [x] Chrome (desktop) version 58.0.3029.110 (64-bit)
- [ ] 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 
- Platform: 

Others:

[Ledzz]

I finally managed to make some workaround for this. You can use animateChild and another animation.

trigger('listAnimation', [
	transition('* => *', [
		query('@slideIn', [
			stagger(30, [
				animateChild()
			]),
		], { optional: true })
	]),
])

Here's a plunkr: http://plnkr.co/edit/QWgiE4tYLN3O2Tnx1E7j?p=preview

[matsko]

I believe this fixes the issue: #17534

[matsko]

Not sure just yet. I will get to this once that's in.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}