Problems with 'translate' angular animations in Angular 14

Comece pela demonstração vinculada do StackBlitz e compare package.json com package-13.json, executando as animações translate no Android e no iOS. Rastreie o handler @animationTransition.done e os estilos translate usados pela demonstração. Está concluído quando as animações translate funcionarem em ambas as plataformas e o evento de conclusão for disparado ao final de cada animação, correspondendo ao comportamento do Angular 13.

There are a number of issues that arise in Angular animations that contain 'translate' styles, but only on Angular 14.

I've created a demo app to demonstrate this:

https://stackblitz.com/edit/nativescript-stackblitz-templates-guamwx

If you switch out the package.json with package-13.json, these problems basically go away.

First of all, the translate animations don't seem to work at all on Android.

You will notice if you run in Android, the translation animations don't run when using angular 14, but they do work on angular 13.

Next, the done even does not run when the animation completes.

Running on iOS, you'll see that the translate animations run, but the done event does not get triggered until the start of the next animation. (You can see this in the console, where the start and end events are logged.). Again, if you switch to use angular 13, these problems go away.

(@animationTransition.done)="animationTriggerEnd()"

In the demo project, animationTriggerEnd() is not run until the next animation begins. However, if you remove the translate animations, the events fire normally:

`        transition(
          (fromState, toState) => fromState < toState,
          [
            style({ opacity: 0 }),
            animate('400ms ease-out', style({ opacity: 1 }))
          ]
        ),`

Lastly, some translate animations just don't work.

If on iOS you switch the translate animations to go from 0 to +/- 100%, the animation doesn't happen: the box just jumps.

`        transition(
          (fromState, toState) => fromState < toState,
          [
            style({ opacity: 0, transform: "translateX(0)" }),
            animate('400ms ease-out', style({ opacity: 1, transform: "translateX(100%)" }))
          ]
        ),`

But if you do this same animation on Angular 13, the animation runs normally.

I'm not sure what's causing all of these issues, but they seemed to appear when Angular 14 came out. I've been trying to work around them, but I haven't been able to find a way yet.

What is causing these issues, and can they be corrected?