Slide transition doesnt work in flexbox

[vhtmui]

In a flex block, when i set flex-grow to the child, slide transition will be broken.

Is that a feature? Or there's some way to achieve it.🙏

https://svelte.dev/repl/7d2655d4507a4c2d8c268f72150daeae?version=4.2.19

[brunnerh]

You can create a custom transition that animates flex-grow. E.g.

function flexSlide(node) {
  return {
    duration: 250,
    easing: quadOut,
    css(t, u) {
      const grow = window.getComputedStyle(node).flexGrow;
      return `
          overflow: hidden;
          min-width: 0;
          flex: ${Math.round(t * 100 * grow) / 100} 1 0px;
      `;
    },
  };
}

REPL

[vhtmui]

It's great! thanks!