Angular animation stagger not working properly

Question

I have a little issue with new Angular 4.2 animations features (query, stagger).

Expected behaviour: when i click on Toggle button every [animate-bar] animates in order

Result: Only first [animate-bar] animates

Here's a plunker: http://plnkr.co/edit/qaJpj4Maf0QobAv8bXe6?p=preview

Answer 1

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