diff --git a/.changeset/silver-humans-yawn.md b/.changeset/silver-humans-yawn.md new file mode 100644 index 000000000000..e2743410791b --- /dev/null +++ b/.changeset/silver-humans-yawn.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +feat: warn on using `slide` transition with table elements diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md index 5218ec4cb1f8..284e9a7c3e57 100644 --- a/documentation/docs/98-reference/.generated/client-warnings.md +++ b/documentation/docs/98-reference/.generated/client-warnings.md @@ -222,3 +222,15 @@ 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 + +``` +The `slide` transition does not work correctly for elements with `display: %value%` +``` + +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: + +- `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 21db506dc9da..943cf6f01f4f 100644 --- a/packages/svelte/messages/client-warnings/warnings.md +++ b/packages/svelte/messages/client-warnings/warnings.md @@ -186,3 +186,13 @@ 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 + +> The `slide` transition does not work correctly for elements with `display: %value%` + +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: + +- `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 24d86e2e0b35..78d457f48f55 100644 --- a/packages/svelte/src/internal/client/warnings.js +++ b/packages/svelte/src/internal/client/warnings.js @@ -165,4 +165,16 @@ export function state_proxy_equality_mismatch(operator) { } else { console.warn(`https://svelte.dev/e/state_proxy_equality_mismatch`); } +} + +/** + * The `slide` transition does not work correctly for elements with `display: %value%` + * @param {string} value + */ +export function transition_slide_display(value) { + if (DEV) { + console.warn(`%c[svelte] transition_slide_display\n%cThe \`slide\` transition does not work correctly for elements with \`display: ${value}\`\nhttps://svelte.dev/e/transition_slide_display`, bold, normal); + } else { + 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 aacc6b6cf303..898a929eb11c 100644 --- a/packages/svelte/src/transition/index.js +++ b/packages/svelte/src/transition/index.js @@ -1,4 +1,8 @@ /** @import { BlurParams, CrossfadeParams, DrawParams, FadeParams, FlyParams, ScaleParams, SlideParams, TransitionConfig } from './public' */ + +import { DEV } from 'esm-env'; +import * as w from '../internal/client/warnings.js'; + /** @param {number} x */ const linear = (x) => x; @@ -92,6 +96,8 @@ export function fly( }; } +var slide_warning = false; + /** * Slides an element in and out. * @@ -101,6 +107,13 @@ export function fly( */ export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = 'y' } = {}) { const style = getComputedStyle(node); + + if (DEV && !slide_warning && /(contents|inline|table)/.test(style.display)) { + slide_warning = true; + Promise.resolve().then(() => (slide_warning = false)); + w.transition_slide_display(style.display); + } + const opacity = +style.opacity; const primary_property = axis === 'y' ? 'height' : 'width'; const primary_property_value = parseFloat(style[primary_property]);