diff --git a/.changeset/rare-geese-do.md b/.changeset/rare-geese-do.md new file mode 100644 index 000000000000..38641fddcbab --- /dev/null +++ b/.changeset/rare-geese-do.md @@ -0,0 +1,5 @@ +--- +'svelte': minor +--- + +feat: add crossfade strategies, scale (like before) & size diff --git a/packages/svelte/src/transition/index.js b/packages/svelte/src/transition/index.js index 898a929eb11c..55313bc74e74 100644 --- a/packages/svelte/src/transition/index.js +++ b/packages/svelte/src/transition/index.js @@ -246,7 +246,8 @@ export function crossfade({ fallback, ...defaults }) { const { delay = 0, duration = /** @param {number} d */ (d) => Math.sqrt(d) * 30, - easing = cubic_out + easing = cubic_out, + strategy = 'scale' } = assign(assign({}, defaults), params); const from = from_node.getBoundingClientRect(); const to = node.getBoundingClientRect(); @@ -263,11 +264,19 @@ export function crossfade({ fallback, ...defaults }) { duration: typeof duration === 'function' ? duration(d) : duration, easing, css: (t, u) => ` - opacity: ${t * opacity}; - transform-origin: top left; - transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${ - t + (1 - t) * dh - }); + opacity: ${t * opacity}; + transform-origin: top left; + transform: ${transform} translate(${u * dx}px, ${u * dy}px) ${ + strategy === 'scale' ? `scale(${t + (1 - t) * dw}, ${t + (1 - t) * dh})` : '' + }; + ${ + strategy === 'size' + ? ` + width: ${to.width + (from.width - to.width) * (1 - t)}px; + height: ${to.height + (from.height - to.height) * (1 - t)}px; + ` + : '' + } ` }; } diff --git a/packages/svelte/src/transition/public.d.ts b/packages/svelte/src/transition/public.d.ts index 454840ad79c6..fd38f7d32f95 100644 --- a/packages/svelte/src/transition/public.d.ts +++ b/packages/svelte/src/transition/public.d.ts @@ -57,6 +57,7 @@ export interface CrossfadeParams { delay?: number; duration?: number | ((len: number) => number); easing?: EasingFunction; + strategy?: 'scale' | 'size'; } export * from './index.js'; diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index c6000fc4b67f..f05ef0b972d0 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -2273,6 +2273,7 @@ declare module 'svelte/transition' { delay?: number; duration?: number | ((len: number) => number); easing?: EasingFunction; + strategy?: 'scale' | 'size'; } /** * Animates a `blur` filter alongside an element's opacity.