Attached Transitions/Animations

[jrmoynihan]

Transitions and animations are great out-of-the-box tools from Svelte, but as Attachments improved greatly on the flexibility of Actions, I think we need a similar update to these directives.

We could implement some attachment to run a WAAPI animation on a child component/node and spread it down through props with createAttachmentKey(), but one feature is missing: the ability to synchronize the cleanup function with the lifecycle of the component.

This is a poor, hacky attempt show what I mean:

<script>
// imports...

let promise = $state(new Promise<boolean>((resolve) => resolve(true)));
const input_attributes: HTMLInputAttributes = {
  [createAttachmentKey()]: (node) => {
     // Normal reactivity to state...
     
    return () => {
      node.style.background = 'red';
      setTimeout(() => {
	  promise = new Promise(() => false);
      }, 1000);
    };
  }
};
</script>

{#await promise}
  Waiting....
{:then value}
  {#if value}
    <Child {...input_attributes} />
  {/if}
{:catch error}
  {error}
{/await}

Does anyone have a better way of doing this? Or do you think it is the purview of the framework to provide an elegant way to synchronize these primitives?