Repository: svelte
Issue: Enhance the slide transition to support sliding from the right or the bottom
Labels: transition/animation

### Describe the problem

While working in a Proof of Concept for my company in the REPL, I wanted to show how informative animations are for the end user, which is something not easily accomplished with React (the company's choice).

I have the UI diagramed below:

![image](https://github.com/sveltejs/svelte/assets/25540842/9973969c-e604-44bc-8bff-0d6fda3adaca)

As expained in the image, the top box slides from left to right.  Now, if a new operation is started by interacting with the lower boxes, I wanted the top box to now slide to the right, and then a new box would appear as before:  Sliding from the left:

![image](https://github.com/sveltejs/svelte/assets/25540842/fa62393a-788c-44aa-9b40-8bae1f413f64)

The current implementation of the `slide()` transition, as far as I can tell, is incapable of giving me this behavior because:

1. You can only select the axis (`x` or `y`), but not which side of it to anchor:  It is always **left** for `x` and **top** for `y`.
2. While the transition takes place, the space is not shared between the outgoing and the incoming elements being transitioned.

### Describe the proposed solution

In my REPL, I quickly made a new `slide()` function and applied the following:

1. The `axis` values can be: `x`, `-x`, `y`, `-y`, `+x`, `+y`.  The `+` versions are the same as the original versions; the `-` versions anchor the animation to the right or to the bottom.
2. I managed to solve the space issue by setting `position: absolute` to the outgoing element.  I also added a small delay so there will be blank space between the outgoing and the incoming elements.

This is the quick-n-dirty code I made:

```js
	function slideEx(node, { delay = 0, duration = 400, easing = undefined, axis = 'y' }) {
		const o = getComputedStyle(node).position;
		const invert = axis[0] === '-';
		axis = axis.length > 1 ? axis[1] : axis;
		let anchor;
		if (axis === 'x') {
			anchor = invert ? 'right' : 'left';
		}
		else {
			anchor = invert ? 'bottom' : 'top';
		}
		const slideTo = slide(node, {
			delay,
			duration,
			easing,
			axis
		});
		let finalT;
		return {
			delay,
			duration,
			css: (t, u) => {
				if (!finalT) {
					node.style.position = 'absolute';
					node.style[anchor] = 0;
					finalT = t === 0 ? 1 : 0;
				}
				if (t === finalT) {
					node.style.position = o;
				}
				return slideTo.css(t, u);
			}
		};
	}
```

In light of the fact that the `position` thing was only needed in the outro, I applied `in:slide` and `out:slideEx`.  I suppose that, for this to work, `slide()` would require an extra option to only set `position` on-demand.

**NOTE**:  The code is not perfect.  Setting `position` has undesired effects.  For example:  By changing my axis to `Y`, absolute positioning brings the element all the way down to the bottom of the page.  I am no UI expert (I'm a back-end developer), so I think I should let this in the hands of people that know better than me.

### Alternatives considered

Since I was able to make it work, I did not explore alternatives.

### Importance

nice to have