Animation/transition for toggling expanded mode for navigation rail

[TheEisbaer]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Some kind of animation when toggling the expanded property would be nice

transition-[width] for example and maybe some transition/animation for moving the labels for each tile

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[MrVauxs]

Putting transition-[width] on the Navigation.Rail and setting a height on the underlying Navigation.Tiles makes a pretty reasonable starting off point. Defining the height explicitly is required due to the Tiles otherwise flashing as they take up all the available height in the 1:1 square aspect ratio.

chrome_5Lk531Mq1E.mp4

[endigo9740]

@MrVauxs Yeah that looks good. The only issue right now is I'm currently busy with a cross-country move. I'd welcome a PR with this change.

And for Svelte adding a transition is very easy as well. We just mainly have been holding off until we could implement something in the ballpark for React too. But this might suffice in the meantime.

[endigo9740]

FYI we've launched the Skeleton v4 release candidate today that will include this change out of the box:

• Announcing the Skeleton v4 Release Candidate #3844

v4 docs:
https://next.skeleton.dev/docs/components/navigation/svelte#toggle-layout