nativescript - 如何为 NativeScript 的 FlexboxLayout 中插入和移除的元素设置动画？

Question

我正在尝试让一排按钮根据是否添加或删除其他按钮而变大和变小。 FlexboxLayout 似乎最适合这项工作，但除了在一段时间内手动操纵宽度百分比之外，我似乎无法弄清楚如何解决这个问题。

我想我可以在它们上设置 flexGrow，然后使用一个带有 visibility: collapse 的类来基本上删除按钮。 (然后在恢复正常时反转。)这是有效的，但变化是瞬间发生的。我想要某种挤压/拉伸(stretch)动画。

我尝试播放动画，将比例缩小到 0，如下所示。虽然按钮看起来缩小了，但它只是朝着自身的中心收缩，并且仍然保持它占据的空间(留下一个间隙)。

我正在玩这样一个简单的例子:

<FlexboxLayout flexDirection="row">
  <Button text="1" width="25%" flexGrow="1"></Button>
  <Button text="2" width="25%" id="test-button"></Button>
  <Button text="3" width="25%" flexGrow="1"></Button>
  <Button text="4" width="25%" flexGrow="1"></Button>
</FlexboxLayout>

我尝试做这样的事情，我想将按钮 #2 缩小到消失:

let testButton = this.page.getViewById("test-button");
testButton.animate({
  scale: { x: 0, y: 1},
  duration: 500
});

我也试着用关键帧来做。这似乎没有做任何事情。

#test-button {
  animation-name: shrink;
  animation-duration: 2s;
  animation-delay: 1s;
}


@keyframes shrink {
    from { width: 25%; }
    to { width: 0; }
}

我尝试做类似提到的事情 in this answer here for web pages ，但这似乎也没有做任何事情。

我设法通过使用数据绑定(bind)使其工作，该数据绑定(bind)使用 setTimeout 手动调整宽度。但我想知道是否有可能更容易管理的不同路线？不禁想知道我是否在其他尝试中搞砸了。

Answer 1

您可以隐藏按钮，同时使用按钮 visibility 属性并在动画结束时隐藏组件。为了您的方便，我附上示例代码

app.component.html

<FlexboxLayout flexDirection="row">
  <Button backgroundColor="green" text="1" width="25%" flexGrow="1"></Button>
  <Button backgroundColor="blue" (loaded)="buttonLoaded()" text="2" width="25%" id="test-button"></Button>
  <Button backgroundColor="green" text="3" width="25%" flexGrow="1"></Button>
  <Button backgroundColor="blue" text="4" width="25%" flexGrow="1"></Button>
</FlexboxLayout>

应用程序组件.ts

import { Component } from "@angular/core";
import { Page } from "ui/page"

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    constructor(private page:Page){}

    public buttonLoaded(){
        let testButton = this.page.getViewById("test-button");
            testButton.animate({
            scale: { x: 0, y: 1},
            duration: 500
        })
        .then(()=>{
            let testButton = this.page.getViewById("test-button");
            testButton.visibility='collapse'
        });
    }
}