I've seen a lot of people around here talking about Angular animations. Well, no solutions is working for me. I'm currently using Angular 4, with angular-cli v1.1.1. I'm using Angular animation on several steps of my applications, in my router-outlet too. Turns out in Safari 10/11 ( mobile ) no animations is currently working.
In my polyfills.ts I have the following line of code import 'web-animations-js'; which should work on every browser that doesn't fully support Angular animations. On IE 10/11 it's working, not perfectly but it's working. Firefox too.
The real problem on mobile Safari 10/11 is the animate syntax. With this particular syntax any animation wouldn't work. my router-outlet doesn't even show.
I can't understand why this doesn't work, any clue? Thank you in advance!
EDIT:
initial: style({ transform: 'translateY(100vh)' }),
animate: animate(
${phaseDuration}ms ${phaseDuration}ms ease-in,
style({ transform: 'translateY(0)' })
)
};
This is the code that breaks everything, inside che enter transition
Turns out the polyfill library has several open issues with the integration with mobile Safari. However, if the iPhone or iPad requests for Desktop Site the animations work fine.