javascript - 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.

Answer 1

Tiago Alves 的 Groceries 示例应用程序中有一个很好的例子。我在这里借用了他的一些代码，你可以像这样制作动画：

给你的元素一个ref：

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

然后使用标准的 NativeScript Animation API 抓取该 ref 并为其设置动画：

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