feat: css units in fly & blur transitions (#7623)

Closes #6050

---------

Co-authored-by: Bob Fanger <[email protected]>
Co-authored-by: Simon H <[email protected]>
Co-authored-by: Ben McCann <[email protected]>

Author: 4 people

site/content/docs/04-run-time.md

@@ -693,7 +693,7 @@ Animates a `blur` filter alongside an element's opacity.
 * `duration` (`number`, default 400) — milliseconds the transition lasts
 * `easing` (`function`, default `cubicInOut`) — an [easing function](/docs#run-time-svelte-easing)
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
-* `amount` (`number`, default 5) - the size of the blur in pixels
+* `amount` (`number | string`, default 5) - the size of the blur. Supports css units (for example: `"4rem"`). The default unit is `px`
 
 ```sv
 <script>
@@ -728,10 +728,11 @@ Animates the x and y positions and the opacity of an element. `in` transitions a
 * `delay` (`number`, default 0) — milliseconds before starting
 * `duration` (`number`, default 400) — milliseconds the transition lasts
 * `easing` (`function`, default `cubicOut`) — an [easing function](/docs#run-time-svelte-easing)
-* `x` (`number`, default 0) - the x offset to animate out to and in from
-* `y` (`number`, default 0) - the y offset to animate out to and in from
+* `x` (`number | string`, default 0) - the x offset to animate out to and in from
+* `y` (`number | string`, default 0) - the y offset to animate out to and in from
 * `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 
+x and y use `px` by default but support css units, for example `x: '100vw'` or `y: '50%'`.
 You can see the `fly` transition in action in the [transition tutorial](/tutorial/adding-parameters-to-transitions).
 
 ```sv

src/runtime/internal/utils.ts

@@ -189,3 +189,8 @@ export const has_prop = (obj, prop) => Object.prototype.hasOwnProperty.call(obj,
 export function action_destroyer(action_result) {
 	return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
 }
+
+export function split_css_unit(value: number | string): [number, string] {
+	const split = typeof value === 'string' && value.match(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+	return split ? [parseFloat(split[1]), split[2] || 'px'] : [value as number, 'px'];
+}

src/runtime/transition/index.ts

@@ -1,5 +1,5 @@
 import { cubicOut, cubicInOut, linear } from 'svelte/easing';
-import { assign, is_function } from 'svelte/internal';
+import { assign, split_css_unit, is_function } from 'svelte/internal';
 
 export type EasingFunction = (t: number) => number;
 
@@ -15,7 +15,7 @@ export interface BlurParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
-	amount?: number;
+	amount?: number | string;
 	opacity?: number;
 }
 
@@ -31,12 +31,12 @@ export function blur(node: Element, {
 	const f = style.filter === 'none' ? '' : style.filter;
 
 	const od = target_opacity * (1 - opacity);
-
+	const [value, unit] = split_css_unit(amount);
 	return {
 		delay,
 		duration,
 		easing,
-		css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);`
+		css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * value}${unit});`
 	};
 }
 
@@ -65,8 +65,8 @@ export interface FlyParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
-	x?: number;
-	y?: number;
+	x?: number | string;
+	y?: number | string;
 	opacity?: number;
 }
 
@@ -83,13 +83,14 @@ export function fly(node: Element, {
 	const transform = style.transform === 'none' ? '' : style.transform;
 
 	const od = target_opacity * (1 - opacity);
-
+	const [xValue, xUnit] = split_css_unit(x);
+	const [yValue, yUnit] = split_css_unit(y);
 	return {
 		delay,
 		duration,
 		easing,
 		css: (t, u) => `
-			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
+			transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
 			opacity: ${target_opacity - (od * u)}`
 	};
 }

test/utils/index.ts

@@ -1,5 +1,6 @@
 import * as assert from 'assert';
 import { trim_start, trim_end } from '../../src/compiler/utils/trim';
+import { split_css_unit } from '../../src/runtime/internal/utils';
 
 describe('utils', () => {
 	describe('trim', () => {
@@ -13,4 +14,17 @@ describe('utils', () => {
 			assert.equal(value, '	\r\n\t svelte content');
 		});
 	});
+
+	describe('split_css_unit', () => {
+		it('should use px as default', () => {
+			assert.deepEqual(split_css_unit(10), [10, 'px']);
+			assert.deepEqual(split_css_unit('10'), [10, 'px']);
+		});
+
+		it('should split the css notation into value and unit', () => {
+			assert.deepEqual(split_css_unit('-50%'), [-50, '%']);
+			assert.deepEqual(split_css_unit('0.1rem'), [0.1, 'rem']);
+			assert.deepEqual(split_css_unit('.1rem'), [0.1, 'rem']);
+		});
+	});
 });