Problems with 'translate' angular animations in Angular 14

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?

Start with the linked StackBlitz demo and compare package.json with package-13.json, running the translate animations on Android and iOS. Trace the @animationTransition.done handler and the translate styles used by the demo. Done means translate animations work on both platforms and the completion event fires at the end of each animation, matching Angular 13 behavior.