Animating using the wildcard state (*) doesn't work

[madakk]

Following up on issue #961, I tried to run the sample from animation-states-test using the latest libraries, and it seems to now not animate at all between the two states, but switch directly from the inactive to active state. Changing the animation trigger to explicitly animate from inactive => active and vice-versa makes the animation work again, and similarly the sample from animation-states-multi-test which doesn't use the wildcard state seems to work correctly.

[rynop]

Is there a workaround to this?

I tried using an explicit state instead of * and still doesn't work:

    animations: [
        trigger('brandsflyIn', [
            state("in", style({ transform: "translateX(0)" })),
            transition('void => in', [
                style({ transform: 'translateX(500)' }),
                animate('500ms 500ms ease-in', style({ transform: 'translateX(0)' }))
            ]),
        ]),
    ]

    <FlexboxLayout height="54" flexDirection="row" justifyContent="flex-start"
        alignItems="stretch" flexWrap="nowrap">
        <GridLayout [@brandsflyIn]="'in'" height="54" class="small-card round-border"
            backgroundColor="#F2F2F2"
            *ngFor="let brand of ['adidas','nike','newbalance','ua','fila','lacoste','sketchers','jordan','levis']; let i = index">
            <Label text="{{brand}}"></Label>
        </GridLayout>
    </FlexboxLayout>

Full playground here