Nativescript-angular: BY using Nativescript animations Showing Error: ERROR TypeError: Cannot read property 'length' of undefined

[JaganJonnala]

I used the below Css Animation

.view {
    animation-name: example;
    animation-duration: 1;
    animation-timing-function: ease-in;
   animation-fill-mode: forwards;
}
@keyframes example {
    from { transform: translate(0, 0); }
    to { transform: translate(0, 100); }
}

I referred this class in my view but shown Error : ERROR TypeError: Cannot read property 'length' of undefined

[NickIliev]

@JaganJonnala I am trying to reproduce the issue using this project but with no success at this point (everything works fine on my side).

Can you please post the XML layout used to style and also clarify on what platform you are experiencing this error (Android or iOS).

[JaganJonnala]

@NickIliev
Android

And I am using Nativescript with angular 2
class name used in Html file i mean view

[NickIliev]

@JaganJonnala the actual HTML code involved would help a lot.

[JaganJonnala]

<StackLayout class="view"> <Label text="Medicines" class="c-white"></Label> </StackLayout>

Just given that class name which i have used to animation to the StackLayout as class

[jogboms]

@JaganJonnala I actually experience this same issue but in a different way. When I do exactly what you do, It works but when I split the functionality of the animation-* properties into different classes, it produces this very same error.

[kumarandena]

I am also facing same problem. Any updates regarding this issue @JaganJonnala & @jogboms ?

[JaganJonnala]

HTML

<FlexboxLayout #label1 (loaded)="animate(label1,150)" style="margin-top:120-dip;" flexDirection="column" flexWrap="nowrap">
                                <StackLayout class="foodRow">
                                    <Image src="~/images/icon.png" style="width:65%;height:65%"></Image>
                                </StackLayout>
                                <Label text="Butchery" #label12 (loaded)="animate(label12,650,-5)" textWrap="true" style="margin-top:5;color:white;text-align:center"></Label>
                            </FlexboxLayout>

View-Model - TypeScript

animate(label: Label, durationTime: number, ynumber?: number) { // >> animation-animating-properties-code ynumber = ynumber || -100; label.animate({ translate: { x: 0, y: ynumber }, duration: durationTime, curve: AnimationCurve.easeInOut }).then(() => { }).catch((e) => { console.log(e.message); }); }

I have Used llike this @kumaran-dena

[jogboms]

@kumaran-dena I actually just ignored the animation property that was causing the error.

[kumarandena]

I was tried this. Now its working fine.Thank you @JaganJonnala.

[kumarandena]

Its working fine @jogboms. I tried with following code. This also works fine @JaganJonnala .

app.component.html

`

`

app.css
.login-page-animate{ animation-name: rotate; animation-duration: 2; } @keyframes rotate { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

[erkanarslan]

I have the same problem and I cannot understand how you solved it. What is the problem? What did you change?

It would be nice if anything in the documents would just works without crashing the app.

[mudlabs]

@erkanarslan here's a Playground example.