Feature Suggestion: Transition Forwarding

[brandonmcconnell]

Describe the problem

Currently, there appears to be no way to pass a transition to an element in a nested component. For a standard <button> DOM element, you could do something like this:

<script>
  import { fade } from 'svelte/transition';
</script>

<button trasition:fade>Gather ye rosebuds while ye may</button>

If you wanted to apply the same transition to a button element within a Button component, there is no way to forward that transition down, or even pass the transition down as a prop and then implement it in the nested button.

Describe the proposed solution

This would be an ideal implementation, being able to import the desired transition into the top-level component and then pass it into the component:

<!-- App.svelte -->

<script>
  import { fade } from 'svelte/transition';
  import Button from './Button.svelte';
</script>

<Button transition:fade>Old Time is still a-flying</Button>

<!-- Button.svelte -->

<script>
  export let transition;
</script>

<button transition:{transition}><slot /></button>

Alternatives considered

The alternative I see, which is not idea, would be to wrap the component in a DOM element and apply the transition on the DOM element instead, like this:

<!-- App.svelte -->

<script>
  import { fade } from 'svelte/transition';
  import Button from './Button.svelte';
</script>

<div transition:fade>
  <Button>Old Time is still a-flying</Button>
</div>

<!-- Button.svelte -->

<button><slot /></button>

Importance

would make my life easier

[kevmodrome]

Transitions are just functions, so you can actually apply a transition that has been passed down as a prop:

<!-- App.svelte -->

<script>
  import { fade } from 'svelte/transition';
  import Button from '.Button.svelte';
</script>

<Button transition={fade}>Old Time is still a-flying</Button>

<!-- Button.svelte -->

<script>
  export let transition;
</script>

<button transition:transition><slot /></button>

[brandonmcconnell]

@kevmodrome Wow for some reason, I tried this in a REPL earlier and could've sworn it didn't work but it does. Thank you for clarifying this! 🙏🏼

[Tropix126]

Also, if you're interested you can have a look at this RFC of mine which covers forwarding using the actual transition directive - sveltejs/rfcs#60