feat: Support css units in fly transition

Author: Bob Fanger

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

@@ -705,10 +705,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

@@ -187,3 +187,15 @@ 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, fallback = 'px'): [number, string] {
+	if (typeof value === 'number') {
+		return [value,  fallback];
+	}
+	const split = value?.match?.(/^\s*(-?[\d.]+)([^\s]*)\s*$/);
+	if (split) {
+		return [parseFloat(split[1]),  split[2] || fallback];
+	}
+	console.warn('Failed to split', value);
+	return [parseFloat(value), fallback];
+}

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;
 
@@ -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,39 @@ 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 use the fallback', () => {
+			assert.deepEqual(split_css_unit(100, '%'),[100, '%']);
+			assert.deepEqual(split_css_unit('100', '%'),[100, '%']);
+		});
+		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']);
+		});
+
+		it('should complain for invalid input', () => {
+			const warnings = [];
+			const warn = console.warn;
+			console.warn = (...args) => {
+				warnings.push(args);
+			};
+
+			split_css_unit('calc(100vw - 10rem)');
+			split_css_unit(undefined);
+			assert.deepEqual(split_css_unit('100 %'), [100, 'px']);
+			assert.deepEqual(warnings, [
+				['Failed to split', 'calc(100vw - 10rem)'],
+				['Failed to split', undefined],
+				['Failed to split', '100 %']
+			]);
+
+			console.warn = warn;
+		});
+	});
 });