Problems with 'translate' angular animations in Angular 14

Beginne mit der verlinkten StackBlitz-Demo und vergleiche package.json mit package-13.json; führe die translate-Animationen auf Android und iOS aus. Verfolge den @animationTransition.done-Handler und die von der Demo verwendeten translate-Styles. Als erledigt gilt die Aufgabe, wenn translate-Animationen auf beiden Plattformen funktionieren und das Abschlussereignis am Ende jeder Animation ausgelöst wird, entsprechend dem Verhalten von 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?