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

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

我设法通过使用数据绑定来使用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>

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

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

1 个答案: