Problems with 'translate' angular animations in Angular 14

[JWiseCoder]

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?

[NathanWalker]

Thanks for tracking this and the sample @JWiseCoder we did recently find a cause related to animations module. We’ll see if can be addressed in a patch or next minor.

[JWiseCoder]

It looks like it's the getKeyframeDuration function in packages/angular/src/lib/animations/utils.ts. It's getting styles as a Map object, but it's trying to get styles.offset. If you look into styles, there is a mapping for offset, and if you access that value, things seem to work:

const getKeyframeDuration = (styles: Keyframe): number => styles.get('offset');

[timbell]

I came on to report what looks like the same issue. The animation duration is taken as 0 so the end state is activated immediately. For example (see the fade in/out button in the item-detail component). I can confirm that @JWiseCoder 's suggested fix above worked for me in this respect.

There's a second related issue where the easing is not respected - we always end up with the default (ease).

[JWiseCoder]

It looks like it should be doing the easing per keyframe, but that doesn't look like how it's set up. I don't even see the easing data coming in the keyframes from the Angular animations, so it could be an issue there.

[JWiseCoder]

Correction: It is coming through in Angular. I went back to the demo app I had made for this issue, and I was debugging through the animations, and I found the easing is coming back from Angular, but the @nativescript/angular code isn't using it. I think to make that work (at least temporarily) you can do something like this in packages/angular/src/lib/animations/utils.ts:

const parseAnimationKeyframe = (styles: Keyframe): KeyframeInfo => ({
  duration: getKeyframeDuration(styles),
  curve: getCurve(styles.get('easing')),
  declarations: getDeclarations(styles),
});

I don't know why I didn't see the easing coming back from Angular before. But I tried this change, and it worked.

[timbell]

Yep, that does fix the easing - thanks!

Unfortunately, this iisue means I may as well switch to native animations

[JWiseCoder]

This is still not working in the current version. At present, I am patching this whole function:

createKeyframeAnimation = function(styles, duration, delay, easing) {
    const info = {
        isForwards: true,
        duration: duration || 0.01,
        delay,
        curve: getCurve(easing),
        keyframes: styles.map((styleMap) => ({
            duration: styleMap.hasOwnProperty('offset') ? styleMap.offset : styleMap.get('offset'),
            declarations: getDeclarations(new Map([...styleMap].filter(([k, _]) => k !== 'offset'))),
        })),
    }
    return KeyframeAnimation.keyframeAnimationFromInfo(info);
};

There were some changes to NativeScript animations that made filtering out "offset" from the map necessary.

[nikita-fuchs]

Not sure if my issue is caused by the same bug, but translateX is also not animated for me, Angular 15.0.0 .

  transition('done => enteringFromRight', [
    style({
          'transform' : 'translateX(30px)',
      //'margin-left': '90%',
    }),
    animate('3000ms ease', style({ 'margin-left': '*' })),
  ]),

This one just jumps from start to finish, no smooth animation like if using margin.