Using Angular 4.2.2, the example from https://angular.io/api/animations/stagger also is not working as expected (so do all other tries of getting stagger to work).
All items are shown in the "final position" right from the start and then simply moved into that position via the staggered animation again. Expected behavior of course would be for the elements to not start in their ending state but be animated there.

@maxschwarzmueller Looking over the code of this demo, I've managed to make it work with something like this:

export const fadeInStagger = trigger('fadeIn', [
    transition(':enter', [
        // style({ /* */ }), // << This would actually be applied on the element the trigger is on
        query('.item-class', [ // << this sets initial style on the children we target
            style({ 'opacity': '0' })
        ]),
        query('.item-class', [ // << animate the children that matches the selector
            stagger(100, animate(400, style({ 'opacity': 1 })))
        ])
    ])
]);

for:

<my-carousel @fadeIn>
    <div class="item-class"
        *ngFor="let item of items">
        <img [src]="item.image" alt="" />
    </div>
</my-carousel>

It seems that we also have to query for setting initial style.
By the way, using 4.2.2 now - don't think it matters, but just to be clear in case it does.

@matsko In the light of the recent "discovery", I think this is not an issue anymore, but rather the docs need a bit more improvement?

EDIT: Sorry for all the above... I've just realized, it kind of isn't related to the code in my plnkr example :) I just got tangled in all the things I try lately, with all the new stuff the animations package provides us. And I'm also a bit tired right now. But I'm not going to delete it, maybe it's a scenario that will help others when coming across this.

Thank you @MrCroft for this. Here's the fix for that #17534

Just realized... my previous comment isn't 100% related to the issue. Just got tangled in all the things I keep trying lately, with the new stuff that the animations package provides us. Sorry about that @maxschwarzmueller

@MrCroft Okay, I misunderstood you, too then ;). Still, the behavior seems to be unintended, you shouldn't have to query the element and change the style before you stagger() in my opinion.

@maxschwarzmueller Yes, definitely.
It seems it's fixed now, as Matias mentioned above. Hopefully, it will be published with the next update.

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.}