From 8c33015186729aaf02b823d7b2c37255c5753e2d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 7 Jan 2025 12:52:54 -0500 Subject: [PATCH] more generic --- .../docs/98-reference/.generated/client-warnings.md | 8 +++++--- packages/svelte/messages/client-warnings/warnings.md | 8 +++++--- packages/svelte/src/internal/client/warnings.js | 6 +++--- packages/svelte/src/transition/index.js | 10 ++++++++-- 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md index c8fede681c3c..cba8343108eb 100644 --- a/documentation/docs/98-reference/.generated/client-warnings.md +++ b/documentation/docs/98-reference/.generated/client-warnings.md @@ -223,12 +223,14 @@ Reactive `$state(...)` proxies and the values they proxy have different identiti To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy. -### transition_slide_display_table +### transition_slide_display ``` The `slide` transition does not work correctly with elements with `display: %value%` ``` -The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element. Setting `height` to a value smaller than the element's natural height has no effect if the element's [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) style starts with `table` (which is the default state of table elements such as ``). +The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for: -Consider using a `flex` or `grid` layout instead. +- `display: inline` (which is the default for elements like ``), and its variants like `inline-block`, `inline-flex` and `inline-grid` +- `display: table` and `table-[name]`, which are the defaults for elements like `` and `` +- `display: contents` diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md index 7fda90c326b3..6493501093e4 100644 --- a/packages/svelte/messages/client-warnings/warnings.md +++ b/packages/svelte/messages/client-warnings/warnings.md @@ -187,10 +187,12 @@ To fix it, either create callback props to communicate changes, or mark `person` To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy. -## transition_slide_display_table +## transition_slide_display > The `slide` transition does not work correctly with elements with `display: %value%` -The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element. Setting `height` to a value smaller than the element's natural height has no effect if the element's [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display) style starts with `table` (which is the default state of table elements such as ``). +The [slide](/docs/svelte/svelte-transition#slide) transition works by animating the `height` of the element, which requires a `display` style like `block`, `flex` or `grid`. It does not work for: -Consider using a `flex` or `grid` layout instead. +- `display: inline` (which is the default for elements like ``), and its variants like `inline-block`, `inline-flex` and `inline-grid` +- `display: table` and `table-[name]`, which are the defaults for elements like `
` and `` +- `display: contents` diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js index 98fb47124df0..67222dbebdb4 100644 --- a/packages/svelte/src/internal/client/warnings.js +++ b/packages/svelte/src/internal/client/warnings.js @@ -171,10 +171,10 @@ export function state_proxy_equality_mismatch(operator) { * The `slide` transition does not work correctly with elements with `display: %value%` * @param {string} value */ -export function transition_slide_display_table(value) { +export function transition_slide_display(value) { if (DEV) { - console.warn(`%c[svelte] transition_slide_display_table\n%cThe \`slide\` transition does not work correctly with elements with \`display: ${value}\`\nhttps://svelte.dev/e/transition_slide_display_table`, bold, normal); + console.warn(`%c[svelte] transition_slide_display\n%cThe \`slide\` transition does not work correctly with elements with \`display: ${value}\`\nhttps://svelte.dev/e/transition_slide_display`, bold, normal); } else { - console.warn(`https://svelte.dev/e/transition_slide_display_table`); + console.warn(`https://svelte.dev/e/transition_slide_display`); } } \ No newline at end of file diff --git a/packages/svelte/src/transition/index.js b/packages/svelte/src/transition/index.js index 9e4274fa7ba1..d897be378be1 100644 --- a/packages/svelte/src/transition/index.js +++ b/packages/svelte/src/transition/index.js @@ -108,10 +108,16 @@ var slide_warning = false; export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = 'y' } = {}) { const style = getComputedStyle(node); - if (DEV && style.display.startsWith('table-') && !slide_warning) { + if ( + DEV && + !slide_warning && + (style.display.includes('table') || + style.display.includes('inline') || + style.display === 'contents') + ) { slide_warning = true; Promise.resolve().then(() => (slide_warning = false)); - w.transition_slide_display_table(style.display); + w.transition_slide_display(style.display); } const opacity = +style.opacity;