How do you assign an element to animate with Nativescript-Vue?

Question

Check this documentation:

https://docs.nativescript.org/ui/animation

I'm trying to add a class or ID of this element as <Label> to animate anything but I'm not sure what's is supposed to assign an element using view to take full control of any animation by calling animation methods directly with code instead of CSS animations in Vue template.

Jen Looper · Accepted Answer · 2018-08-15 20:06:14Z

8

there's a good example of doing this from the Groceries sample app by Tiago Alves. I borrowed some of his code here, and you can animate like this:

Give your element a ref:

<AbsoluteLayout marginTop="-340" ref="logoContainer" class="logo-container">
    <Image translateY="0" src="res://seal" stretch="none"/>
</AbsoluteLayout>

and then grab that ref and animate it using the standard NativeScript Animation API:

this.$refs.logoContainer.nativeView
    .animate({
      translate: { x: 0, y: platformModule.isAndroid ? -70 : -50 },
      duration: 500,
      curve: enums.AnimationCurve.easeIn })
    .then(() => {
      this.state = 'main'
    })

answered Aug 15, 2018 at 20:06

Jen Looper

4283 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivan Over a year ago

Your original code gave me some errors, but I managed to edit some undefined objects and it worked. Replace platformModule.isAndroid to some number like -50 just as y: -50 and comment curve: enums.AnimationCurve.easeIn it seems enums is undefined too, also comment this.state = "main" because this callback is optional.

Collectives™ on Stack Overflow

How do you assign an element to animate with Nativescript-Vue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related