more generic

pull/14936/head
Rich Harris 2 years ago
parent 8c33015186
commit 4321c1e056

@ -226,7 +226,7 @@ To resolve this, ensure you're comparing values where both values were created w
### transition_slide_display ### 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: 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:

@ -189,7 +189,7 @@ To resolve this, ensure you're comparing values where both values were created w
## transition_slide_display ## 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: 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:

@ -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 * @param {string} value
*/ */
export function transition_slide_display(value) { export function transition_slide_display(value) {
if (DEV) { 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 { } else {
console.warn(`https://svelte.dev/e/transition_slide_display`); console.warn(`https://svelte.dev/e/transition_slide_display`);
} }

@ -108,13 +108,7 @@ var slide_warning = false;
export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = 'y' } = {}) { export function slide(node, { delay = 0, duration = 400, easing = cubic_out, axis = 'y' } = {}) {
const style = getComputedStyle(node); const style = getComputedStyle(node);
if ( if (DEV && !slide_warning && /(contents|inline|table)/.test(style.display)) {
DEV &&
!slide_warning &&
(style.display.includes('table') ||
style.display.includes('inline') ||
style.display === 'contents')
) {
slide_warning = true; slide_warning = true;
Promise.resolve().then(() => (slide_warning = false)); Promise.resolve().then(() => (slide_warning = false));
w.transition_slide_display(style.display); w.transition_slide_display(style.display);

Loading…
Cancel
Save