Introducing a parameter to allow for horizontal slide transition

[Theo-Steiner]

Is your feature request related to a problem? Please describe.
The slide transition is great for providing realistic feeling user experiences, because it evokes a sense of space for UI components "sliding" out of the screen. However, at the time of me writing this issue, the slide transition only works vertically, with the item shrinking in the justify-direction of the parent element.
With other transitions allowing for parameters to customize transition specific behavior, I wish the slide transition would have an option to change the axis of shrinking.

Describe the solution you'd like
A clear and concise description of what you want to happen.

<script>import slide from "svelte/transition";</script>
<div transiton:slide={{delay: 500,  axis: "x"}}>I slide in from the right.<div>

While I am still unsure about the semantics of this proposal, it would definitely be nice to have the possibility to introduce this behavior. With the defaults for axis set to "y" the unmodified behavior would not change and existing code would not be broken.
This behavior could be introduced by modifying the slide function in svelte/src/runtime/transition starting from line 97.

Another possible solution is to allow setting the xAxis and yAxis independently, which would also allow for a diagonal animation in the case that both axes are set to true, further improving on the versatility of the slide transition function.

Describe alternatives you've considered
It is possible to implement this horizontal sliding feature inside a svelte component just when needed, however, for this one has to first dive into the source code/ advanced documentation to find out how the transitions are implemented.
I just started out web development, and it took me a few hours to get the transition to work as intended. This could be made way more trivial by just allowing for parameters to be passed to the function.
The alternative to incorporating this feature into svelte, is having the user write the following non-trivial code:

<script>
import { cubicOut } from "svelte/easing";
function horizontalSlide(
        node,
        { delay = 0, duration = 400, easing = cubicOut, inverse = 1 }
    ) {
        const style = getComputedStyle(node);
        const opacity = +style.opacity;
        const width = parseFloat(style.width);
        const paddingLeft = parseFloat(style.paddingLeft);
        const paddingRight = parseFloat(style.paddingRight);
        const marginLeft = parseFloat(style.marginLeft);
        const marginRight = parseFloat(style.marginRight);
        const borderLeftWidth = parseFloat(style.borderLeftWidth);
        const borderRightWidth = parseFloat(style.borderRightWidth);

        return {
            delay,
            duration,
            easing,
            css: (t) =>
                `overflow: hidden;` +
                `opacity: ${Math.min(t * 20, 1) * opacity};` +
                `width: ${t * width}px;` +
                `padding-left: ${t * paddingLeft}px;` +
                `padding-right: ${t * paddingRight}px;` +
                `margin-left: ${t * marginLeft}px;` +
                `margin-right: ${t * marginRight}px;` +
                `border-left-width: ${t * borderLeftWidth}px;` +
                `border-right-width: ${t * borderRightWidth}px;`,
        };
    }
</script>

<div transiton:horizontalSlide={{delay: 500,  xAxis: 1, yAxis: 0}}>I slide in from the right.<div>

How important is this feature to you?
One of the unique selling points of svelte.js is that it provides transitions out of the box. Increasing the versatility and therefore usability of transition functions therefore is directly related to the ease-of-use of svelte.js and therefore also it's popularity.

Additional context
If you want to see the feature in action: I use the user-implementation of the horizontal slide transition in production on the contact form of my website MortimerBaltus.com (window at the top left).
The reversal of the sliding animation is achieved by dynamically changing the flex-direction of the parent container - from flex-direction: row; to flex-direction: row-reverse;.
I also created a repl for this effect implementing both the solution I used on my website and my proposed solution.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed as it was previously marked as stale and saw no subsequent activity.

[johannesronaldsson]

Has this been added to the svelte library?

[knulpi]

Has this been added to the svelte library?

yes it has been: #6183
@dummdidumm this issue can be closed, no?

[Theo-Steiner]

thanks @knulpi!
Closed via #6183.

[Conduitry]

The axis option has been added in 3.56.0.