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

Question

查看此文档：

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

我正在尝试将此元素的 class 或 ID 添加为 <Label> 以对任何内容进行动画处理，但我不确定应该使用 view 分配什么元素通过直接用代码调用动画方法而不是 Vue 模板中的 CSS 动画来完全控制任何动画。

Answer 1

蒂亚戈·阿尔维斯 (Tiago Alves) 的 Groceries 示例应用程序中有一个很好的执行此操作的示例。我在这里借用了他的一些代码，你可以这样制作动画：

给你的元素一个 ref:

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

然后获取该引用并使用标准 NativeScript 动画对其进行动画处理 API:

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

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

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

javascript

nativescript

nativescript-vue