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.

I know it's a bit late - but have you come up with a solution? — Tom, Mar 15 '20 at 18:04

score 1 · Answer 1 · answered Dec 28 '16 at 10:57

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>

Thanks for the hints! Unfortunately the behavior stays the same. There is only one component for which animations work consistently on mobile, going to investigate what is different about that page. — Thorsten Westheider, Dec 28 '16 at 11:14

Angular routing animations play sporadically on mobile Chrome

1 Answers1