如何为在NativeScript'中插入和删除的元素设置动画；什么是FlexboxLayout？

我正在尝试创建一行按钮，它们的大小取决于是否添加或删除了其他按钮

FlexboxLayout

似乎最适合这项工作，但除了在一段时间内手动操作宽度百分比之外，我似乎不知道如何解决这个问题

我想我可以在它们上设置

flexGrow

，然后使用一个具有

可见性的类：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>

我也试着用关键帧来做。那似乎没什么用

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


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

我试着做一些像上面提到的那样的事情，但那似乎也没有起到任何作用

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


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

---

我通过使用数据绑定，使用

setTimeout

手动调整宽度，成功地使其工作。但我想知道是否有一条更容易管理的不同路线？我忍不住想知道我是否在其他尝试中弄错了什么。

当动画完成时，您可以在使用Button

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>

---

哦，嘿，这是一种方法！我也很欣赏这个方便的代码D谢谢你。唯一的问题是，它更像是将可见性设置为“塌陷”的即时捕捉。我不确定我是否也喜欢这种方式，因为它仍然很酷。但是，出于最初的想法，其他元素将在开放空间中快速增长，您认为只有数据绑定才能做到这一点吗？我使用数据绑定的方法是缩小一个按钮，然后其他按钮会随着缩小而增长。这种方法也不会以动画或线性方式删除项目，而是隐藏元素，然后突然将所有内容都捕捉回来，使所有内容看起来都非常丑陋。您的解释非常好且简单，谢谢你，伙计！

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