Nativescript: [TNS RC 2] View disappears after an opacity animation completes

[tjvantoll]

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

This issue seems similar to #4046, but I was not able to rectify the issue by using the latest version of the modules from the master branch, so I think this might be something separate.

Tell us about the problem

If you run an animation to change the opacity of any UI component, when that opacity animation completes, the component’s state returns to its initial state. (Specific recreation steps are below.)

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: 3.0.0-rc.2
• Cross-platform modules: 3.0.0-rc.2
• Runtime(s): 3.0.0-rc.1 (Android) and 3.0.0-rc.2 (iOS)
• Plugin(s): Only the ones that ship with the default template

Please tell us how to recreate the issue in as much detail as possible.

Create an app that has the following CSS:

Label {
  opacity: 0;
}
Label.visible {
  animation-name: show;
  animation-duration: 1s;
}
@keyframes show {
  from { opacity: 0; }
  to { opacity: 1; }
}

And the following TypeScript:

import { Component } from "@angular/core";

@Component({
  selector: "ns-app",
  template: `
    <StackLayout>
      <Label text="I’m a label!" [class.visible]="showLabel"></Label>
      <Button text="Show Label" (tap)="show()"></Button>
    </StackLayout>
  `
})
export class AppComponent {
  showLabel = false;

  show() {
    this.showLabel = true;
  }
}

Load the app and click the button. You’ll see the label appear, which is correct, but then the label will suddenly disappear, which is not right.

Note that this affects our Angular Getting Started Tutorial, and the Groceries sample.

Thanks!

[NickIliev]

Confirming this as a bug - on both iOS and Android the property changed by the CSS animation is reset to the initial value once its execution has passed. Expected behavior - to keep the new value after the animation is completed.

Test application can be found here

[tjvantoll]

@vakrilov has enlightened me. This is actually not a bug. To get the final animation state correct you need to add animation-fill-mode: forwards;, which I was shocked to learn is not the default value.

So it appears all previous versions were not conforming to the CSS animation spec, and {N} 3.0 fixed that issue. I’m closing this as it seems we’re good.

[EddyVerbruggen]

Bit me as well, adding animation-fill-mode: forwards; fixed it, thanks!

Perhaps this should be added to the breaking changes doc as an unbreaking change 😃

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.