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

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