[feat] add axis option to slide transition

[metonym]

Currently, the slide transition only animates on the y-axis. It would be nice to support animating on the x-axis. A real world use case would be a side navigation menu.

This PR adds an axis parameter to the slide transition function. Possible values are 'x' or 'y'. 'y' is the default value for backward compatibility.

Usage

<script>
  import { slide } from "svelte/transition";

  let toggled = false;
</script>

{#if toggled}
  <div transition:slide={{ axis: "x" }} />
{/if}

Demo

Play with the horizontal slide transition in this Svelte REPL.

svelte-transition-slide-x.mov

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with [feat], [fix], [chore], or [docs].
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with npm test and lint the project with npm run lint

[baseballyama]

For part of users, this change increases runtime js size.
Would it be better to provide another function?

[metonym]

For part of users, this change increases runtime js size.

Good point – a separate function would avoid the perf penalty. Do you have suggestions for what it could be called?

• slideX
• slideHorizontal (a bit verbose)

[baseballyama]

Personally slideX is ok for me, but I'm not professional in stylish naming, so I want to wait for more maintainers or naming professionals' comments.

[madeleineostoja]

How big is the extra JS bundle for adding an axis to slide? Unless it's excessive I think the benefit of a smaller API surface far outweighs any small increase in js size

[dummdidumm]

Closing in favor of #6183 which successfully played code golf to not make the bundle size grow as much 😄