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

Question

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

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

我尝试玩动画，将比例缩小到 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; }
}

我试图为网页做一些类似于这个答案中提到的事情，但这似乎也没有做任何事情。

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

Answer 1

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

应用程序组件.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>

app.component.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'
        });
    }
}