How to animate elements inserted and removed in NativeScript's FlexboxLayout? - nativescript

Question

I'm trying to have a row of buttons that grow and shrink depending on if other buttons are added or removed. FlexboxLayout seems most appropriate for this job, but I can't seem to figure out how to approach the problem other than manually manipulating the width percentages over a time.
I thought I could set flexGrow on them and then use a class with visibility: collapse to essentially remove buttons. (And then reverse when returned to normal.) This works, but the change is pretty instantaneous. I would like some sort of squishing/stretching animation.
I tried playing with animations, shrinking the scale to 0 like below. Though the button appeared to shrink, it only did toward the center of itself and still held the space it took up (leaving a gap).
I'm playing with a simple example like this:
<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>
And I tried doing something like this, where I want to shrink button #2 to gone:
let testButton = this.page.getViewById("test-button");
testButton.animate({
scale: { x: 0, y: 1},
duration: 500
});
I also tried to do it with keyframes. That seemed to not do anything.
#test-button {
animation-name: shrink;
animation-duration: 2s;
animation-delay: 1s;
}
#keyframes shrink {
from { width: 25%; }
to { width: 0; }
}
I tried to do something like what was mentioned in this answer here for web pages, but that also didn't seem to do anything.
I managed to get it to work by using databinding that manually adjusts the width using setTimeout. But I was wondering if there might be a different route that might be a bit easier to manage? Can't help but wonder if maybe I'm botching something in my other attempts.

Answer 1

You could hide the Button, while using button visibility property and to hide the component, when the animation finished. For your convenience I am attaching sample code
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'
});
}
}