Angular routing animations play sporadically on mobile Chrome

Question

I got routing animations set up for all pages of my app, that is, every component that can be routed to has

@Component({
    selector: '...',
    templateUrl: '...',
    styleUrls: ['...'],
    animations: [
        trigger('flyInOut', [
            state('in', style({ opacity: 1, transform: 'translateX(0)' })),
            transition('void => *', [
                style({
                    opacity: 0,
                    transform: 'translateX(-100%)'
                }),
                animate('0.3s ease-in')
            ]),
            transition('* => void', [
                animate('0.3s 10 ease-out', style({
                    opacity: 0,
                    transform: 'translateX(100%)'
                }))
            ])
        ])
    ]
})

in their .ts file and

<section [@flyInOut]="active">
   ...
</section>

in its template. So in theory, every page should come flying in from the left and exit to the right side of the screen. This works perfectly on desktop Chrome, no exceptions.

However, on my tablet running mobile Chrome 55.0.2883.91 (desktop: .87) animations play only on some views, and seemingly only on the first visit to that page. Am I missing something here for mobile browsers?

This is with Angular 4.0.0-beta.1 by the way.

Answer 1

It must work. Don't know exact reason. Not sure but you can try below things (not changing anything just give you other way to do it).

animations: [
        trigger('flyInOut', [

             <!--- not required at all ----------->
               state('in', style({ opacity: 1, transform: 'translateX(0)' })),
             <!--- not required at all ----------->

            transition(':enter', [       //<<---changed line but same thing.
                style({
                    opacity: 0,          //<<---not sure with opacity. if view doesn't come up, change it to 1
                    transform: 'translateX(-100%)'
                }),
                animate('0.3s ease-in')
            ]),
            transition(':leave', [       //<<---changed line but same thing.
                animate('0.3s 10 ease-out', style({
                    opacity: 0,
                    transform: 'translateX(100%)'
                }))
            ])
        ])
    ]


<section [@flyInOut]>   //<<----if you are not using active state/variable anywhere then remove it
   ...
</section>