transition_slide_display warning not completely accurate.

[Leftium]

Describe the bug

The slide transition can be made to work for elements with display: table-row, and table-cell. (With specific HTML/CSS)

• REPL
• Real-world use case: table rows that expand with details
• This seems to work on all platforms I have access to (Chrome, Firefox, mobile Safari)
• It may possibly also work for other display: types listed by the warning.

From the PR:

...the best we can do is encourage people to use flex/grid layouts instead.

display: table and friends are important because sometimes it is better to use a table over grid

• mainly: when the data is tabular (esp. for accessibility)
• to get 'free' styling from CSS libraries like Tailwind and PicoCSS

Since some extra user effort is required I suggest:

• (without specific HTML/CSS, the slide transitions won't work or just look odd)
• Updating the warning message and/or linked docs with an example of HTML/CSS required.
• Ideally not displaying the warning when the display transition will work. (Or some way to suppress the real-time warnings?)

---

Optional: add an axis: auto that uses the same axis as its parent slide transition when slide animations are nested and happen at the same time.

• One of the trickiest parts is transitioning table cells that may slide in either the x or y axis.
• If the slide animation itself could determine the appropriate axis this would reduce the user code needed.
• OR introduce new transitions for this purpose. Something like:
  • slideParent or slideX/slideY set global slide axis
  • slideChild or slideAuto use the global slide axis set above

Perhaps someone more knowledgeable can fix my attempt at making the auto-axis slide transition:

• https://svelte.dev/playground/933f76affcbb46139cf241bf1bb53536?version=5.20.1
• It almost works, except one element's slide axis is wrong when switching between axes.

Reproduction

https://svelte.dev/playground/7af27a01079e4e0d81f4ff95cf5d46ba

• Warnings displayed in JS console, even though...
• slide transition is working on table rows/cells

Severity

annoyance

[Leftium]

Would it be possible for the slide transition itself to add the required child <div>?

• Then it might "just work."
• (I guess there are still specific CSS requirements like non-shifting table layout. It would "just work," but it might look odd. Especially when text wrapping is not disabled.)