[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.

https://user-images.githubusercontent.com/10718366/183316478-9c68a7a7-ae7a-42b3-8cf3-196606a12ede.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
• [x] Prefix your PR title with [feat], [fix], [chore], or [docs].
• [x] This message body should clearly illustrate what problems it solves.
• [ ] Ideally, include a test that fails without this PR but passes with it.

Tests

• [x] 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.