如何分配元素以使用Nativescript-Vue进行动画处理?

时间:2018-08-14 07:35:29

标签: javascript nativescript nativescript-vue

查看此文档:

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

我正在尝试将此元素的类或ID添加为driver.manage().window().maximize(); WebElement Cancelbtn= driver.findElement(By.xpath("//button[text()='Cancel']")); WebDriverWait wait = new WebDriverWait(driver, 30); wait.until(ExpectedConditions.elementToBeClickable(Cancelbtn)); Cancelbtn.click(); 来进行动画处理,但是我不确定应该使用<Label>来分配元素以完全控制任何元素通过直接使用代码而不是Vue模板中的CSS动画调用动画方法来实现动画。

1 个答案:

答案 0 :(得分:6)

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'
    })