How to Handle Transitions in Lists

Get Help
1

Hi everyone,
I have a List component that has an item which expands and shifts the rest of the list. I was wondering if there is a way to implement this so that this shift happens as a smooth transition?

What I have is an item component like:

// class Item
{
  rect: true,
  color: 0xffff0000,
  transitions: { h: { duration: 0.5, timingFunction: 'ease-out' } }
}

and a List component:

List: {
  direction: 'column',
  spacing: 40,
  items: [
    { type: Item, w: 50, h: 50 },
    { type: Item, w: 50, h: 50 },
    { type: Item, w: 50, h: 50 },
  ],
}

My naive/incorrect implementation was to call reposition after starting the height transition but that doesn’t cause apply a transition to the list (and doesn’t reposition the list correctly since it repositions before the transition is completed). An example of this would be something like:

expandItem() {
  const secondItem = this.getTag('List').items[1];
  secondItem.patch({smooth: { h: 100 }});
  this.getTag('List').reposition();
}

Is there a way that we can get the list to transition smoothly when repositioning?

Edit:
A hacky solution I found was to continuously call reposition , for example:

expandItem() {
  const secondItem = this.getTag('List').items[1];
  secondItem.patch({smooth: { h: 100 }});
  for(let i = 0; i < 500; i++) {
      Registry.setTimeout(() => {
        this.getTag('List').reposition(0);
      }, i)
  }
}

is there a better way to handle this?