如何使用Nativescript-Vue为动画分配元素？

Question

查看此文档:

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

我正在尝试添加这个元素的类或ID <Label>来动画任何东西,但我不确定应该view通过直接用代码而不是CSS动画调用动画方法来分配一个元素来完全控制任何动画. Vue模板.

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为其设置动画:

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