diff --git a/documentation/docs/98-reference/.generated/client-warnings.md b/documentation/docs/98-reference/.generated/client-warnings.md index cba8343108..284e9a7c3e 100644 --- a/documentation/docs/98-reference/.generated/client-warnings.md +++ b/documentation/docs/98-reference/.generated/client-warnings.md @@ -226,7 +226,7 @@ To resolve this, ensure you're comparing values where both values were created w ### transition_slide_display ``` -The `slide` transition does not work correctly with elements with `display: %value%` +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: diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md index 6493501093..943cf6f01f 100644 --- a/packages/svelte/messages/client-warnings/warnings.md +++ b/packages/svelte/messages/client-warnings/warnings.md @@ -189,7 +189,7 @@ To resolve this, ensure you're comparing values where both values were created w ## transition_slide_display -> The `slide` transition does not work correctly with elements with `display: %value%` +> 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: diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js index 67222dbebd..78d457f48f 100644 --- a/packages/svelte/src/internal/client/warnings.js +++ b/packages/svelte/src/internal/client/warnings.js @@ -168,12 +168,12 @@ export function state_proxy_equality_mismatch(operator) { } /** - * The `slide` transition does not work correctly with elements with `display: %value%` + * 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 with elements with \`display: ${value}\`\nhttps://svelte.dev/e/transition_slide_display`, bold, normal); + 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`); } diff --git a/packages/svelte/src/transition/index.js b/packages/svelte/src/transition/index.js index d897be378b..68c460c870 100644 --- a/packages/svelte/src/transition/index.js +++ b/packages/svelte/src/transition/index.js @@ -108,13 +108,7 @@ var slide_warning = false; export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = 'y' } = {}) { const style = getComputedStyle(node); - if ( - DEV && - !slide_warning && - (style.display.includes('table') || - style.display.includes('inline') || - style.display === 'contents') - ) { + 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);