Nativescript 5 Angular animation problems

[tsonevn]

@yonkoGH commented on Sat Nov 17 2018

• CLI: 5.0.0
• Cross-platform modules: 5.0.0
• Android Runtime: 5
• iOS Runtime: 5
• Plugin(s):

Describe the bug angular animation not working well with Nativescript 5

Sample project https://play.nativescript.org/?template=play-ng&id=Hqp5UQ&v=2576

[tsonevn]

Hi @yonkoGH, We have made some further research on the case, and it seems the issue to be related to the fact that the animation is started for Android before creating the native view. As a workaround, you can try starting the animation on the Image's loaded event. For example: login.component.ts

<Image class="logo" src="~/images/logo.png" [@scale-image]="state" (loaded)="state = 'in'"></Image>

You can also check the sample here. I would suggest keeping track on the issue for further info.

[YoussefGheith]

i tried that but the thing is the UI element disappears when the animation finish + the CSS radius border property not working when using scale or rotate in the animation

see here https://play.nativescript.org/?template=play-ng&id=YhbQLL&v=3

OS:IOS

[tsonevn]

Hi @yonkoGH, Regarding the disappearing the UI element. You can change the transition state change expressions as follows:

transition("void => in", [animate("2000ms ease-out")]),
transition("in => void", [animate("2000ms ease-out")])

With those changes, the element will remain on the screen. I also noticed that the border-radius of the element disappears. We will investigate further, why this is happening.

[jogboms]

@tsonevn any luck with the animation and border-radius issue on iOS yet?.

[YoussefGheith]

The border radius not working with CSS animation even with Nativescript 6