feat: add transition condition to svelte/transition

documentation/docs/03-runtime/04-svelte-transition.md

@@ -27,6 +27,7 @@ Animates the opacity of an element from 0 to the current opacity for `in` transi
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number`, default 400) — milliseconds the transition lasts
 - `easing` (`function`, default `linear`) — an [easing function](/docs/svelte-easing)
+- `condition` (`function`, default `undefined`) - condition to run the transition
 
 You can see the `fade` transition in action in the [transition tutorial](https://learn.svelte.dev/tutorial/transition).
 
@@ -63,6 +64,7 @@ Animates a `blur` filter alongside an element's opacity.
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number`, default 400) — milliseconds the transition lasts
 - `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
+- `condition` (`function`, default `undefined`) - condition to run the transition
 - `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 - `amount` (`number | string`, default 5) - the size of the blur. Supports css units (for example: `"4rem"`). The default unit is `px`
 
@@ -99,6 +101,7 @@ 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/svelte-easing)
+- `condition` (`function`, default `undefined`) - condition to run the transition
 - `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
@@ -144,6 +147,7 @@ Slides an element in and out.
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number`, default 400) — milliseconds the transition lasts
 - `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+- `condition` (`function`, default `undefined`) - condition to run the transition
 
 * `axis` (`x` | `y`, default `y`) — the axis of motion along which the transition occurs
 
@@ -183,6 +187,7 @@ Animates the opacity and scale of an element. `in` transitions animate from an e
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number`, default 400) — milliseconds the transition lasts
 - `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+- `condition` (`function`, default `undefined`) - condition to run the transition
 - `start` (`number`, default 0) - the scale value to animate out to and in from
 - `opacity` (`number`, default 0) - the opacity value to animate out to and in from
 
@@ -220,9 +225,10 @@ Animates the stroke of an SVG element, like a snake in a tube. `in` transitions
 `draw` accepts the following parameters:
 
 - `delay` (`number`, default 0) — milliseconds before starting
-- `speed` (`number`, default undefined) - the speed of the animation, see below.
+- `speed` (`number`, default `undefined`) - the speed of the animation, see below.
 - `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
 - `easing` (`function`, default `cubicInOut`) — an [easing function](/docs/svelte-easing)
+- `condition` (`function`, default `undefined`) - condition to run the transition
 
 The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is a modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will double that duration and setting it to `2` will halve it.
 
@@ -257,6 +263,7 @@ The `crossfade` function creates a pair of [transitions](/docs/element-directive
 - `delay` (`number`, default 0) — milliseconds before starting
 - `duration` (`number` | `function`, default 800) — milliseconds the transition lasts
 - `easing` (`function`, default `cubicOut`) — an [easing function](/docs/svelte-easing)
+- `condition` (`function`, default `undefined`) - condition to run the transition
 - `fallback` (`function`) — A fallback [transition](/docs/element-directives#transition-fn) to use for send when there is no matching element being received, and for receive when there is no element being sent.
 
 ```svelte

packages/svelte/src/runtime/transition/index.js

@@ -11,7 +11,14 @@ import { assign, split_css_unit, is_function } from '../internal/index.js';
  */
 export function blur(
 	node,
-	{ delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 } = {}
+	{
+		delay = 0,
+		duration = 400,
+		easing = cubicInOut,
+		condition = undefined,
+		amount = 5,
+		opacity = 0
+	} = {}
 ) {
 	const style = getComputedStyle(node);
 	const target_opacity = +style.opacity;
@@ -22,7 +29,8 @@ export function blur(
 		delay,
 		duration,
 		easing,
-		css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});`
+		css: (_t, u) => `opacity: ${target_opacity - od * u}; filter: ${f} blur(${u * value}${unit});`,
+		condition
 	};
 }
 
@@ -34,13 +42,17 @@ export function blur(
  * @param {import('./public').FadeParams} [params]
  * @returns {import('./public').TransitionConfig}
  */
-export function fade(node, { delay = 0, duration = 400, easing = linear } = {}) {
+export function fade(
+	node,
+	{ delay = 0, duration = 400, easing = linear, condition = undefined } = {}
+) {
 	const o = +getComputedStyle(node).opacity;
 	return {
 		delay,
 		duration,
 		easing,
-		css: (t) => `opacity: ${t * o}`
+		css: (t) => `opacity: ${t * o}`,
+		condition
 	};
 }
 
@@ -54,7 +66,15 @@ export function fade(node, { delay = 0, duration = 400, easing = linear } = {})
  */
 export function fly(
 	node,
-	{ delay = 0, duration = 400, easing = cubicOut, x = 0, y = 0, opacity = 0 } = {}
+	{
+		delay = 0,
+		duration = 400,
+		easing = cubicOut,
+		condition = undefined,
+		x = 0,
+		y = 0,
+		opacity = 0
+	} = {}
 ) {
 	const style = getComputedStyle(node);
 	const target_opacity = +style.opacity;
@@ -68,7 +88,8 @@ export function fly(
 		easing,
 		css: (t, u) => `
 			transform: ${transform} translate(${(1 - t) * xValue}${xUnit}, ${(1 - t) * yValue}${yUnit});
-			opacity: ${target_opacity - od * u}`
+			opacity: ${target_opacity - od * u}`,
+		condition
 	};
 }
 
@@ -80,7 +101,10 @@ export function fly(
  * @param {import('./public').SlideParams} [params]
  * @returns {import('./public').TransitionConfig}
  */
-export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis = 'y' } = {}) {
+export function slide(
+	node,
+	{ delay = 0, duration = 400, easing = cubicOut, condition = undefined, axis = 'y' } = {}
+) {
 	const style = getComputedStyle(node);
 	const opacity = +style.opacity;
 	const primary_property = axis === 'y' ? 'height' : 'width';
@@ -112,7 +136,8 @@ export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis
 			`margin-${secondary_properties[0]}: ${t * margin_start_value}px;` +
 			`margin-${secondary_properties[1]}: ${t * margin_end_value}px;` +
 			`border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` +
-			`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`
+			`border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`,
+		condition
 	};
 }
 
@@ -126,7 +151,14 @@ export function slide(node, { delay = 0, duration = 400, easing = cubicOut, axis
  */
 export function scale(
 	node,
-	{ delay = 0, duration = 400, easing = cubicOut, start = 0, opacity = 0 } = {}
+	{
+		delay = 0,
+		duration = 400,
+		easing = cubicOut,
+		condition = undefined,
+		start = 0,
+		opacity = 0
+	} = {}
 ) {
 	const style = getComputedStyle(node);
 	const target_opacity = +style.opacity;
@@ -140,7 +172,8 @@ export function scale(
 		css: (_t, u) => `
 			transform: ${transform} scale(${1 - sd * u});
 			opacity: ${target_opacity - od * u}
-		`
+		`,
+		condition
 	};
 }
 
@@ -152,7 +185,10 @@ export function scale(
  * @param {import('./public').DrawParams} [params]
  * @returns {import('./public').TransitionConfig}
  */
-export function draw(node, { delay = 0, speed, duration, easing = cubicInOut } = {}) {
+export function draw(
+	node,
+	{ delay = 0, speed, duration, easing = cubicInOut, condition = undefined } = {}
+) {
 	let len = node.getTotalLength();
 	const style = getComputedStyle(node);
 	if (style.strokeLinecap !== 'butt') {
@@ -174,7 +210,8 @@ export function draw(node, { delay = 0, speed, duration, easing = cubicInOut } =
 		css: (_, u) => `
 			stroke-dasharray: ${len};
 			stroke-dashoffset: ${u * len};
-		`
+		`,
+		condition
 	};
 }
 
@@ -202,7 +239,8 @@ export function crossfade({ fallback, ...defaults }) {
 		const {
 			delay = 0,
 			duration = (d) => Math.sqrt(d) * 30,
-			easing = cubicOut
+			easing = cubicOut,
+			condition = undefined
 		} = assign(assign({}, defaults), params);
 		const from = from_node.getBoundingClientRect();
 		const to = node.getBoundingClientRect();
@@ -224,7 +262,8 @@ export function crossfade({ fallback, ...defaults }) {
 				transform: ${transform} translate(${u * dx}px,${u * dy}px) scale(${t + (1 - t) * dw}, ${
 				t + (1 - t) * dh
 			});
-			`
+			`,
+			condition
 		};
 	}
 

packages/svelte/src/runtime/transition/public.d.ts

@@ -1,4 +1,5 @@
 export type EasingFunction = (t: number) => number;
+export type ConditionFunction = () => boolean;
 
 export interface TransitionConfig {
 	delay?: number;
@@ -6,13 +7,14 @@ export interface TransitionConfig {
 	easing?: EasingFunction;
 	css?: (t: number, u: number) => string;
 	tick?: (t: number, u: number) => void;
-	condition?: () => boolean;
+	condition?: ConditionFunction;
 }
 
 export interface BlurParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
+	condition?: ConditionFunction;
 	amount?: number | string;
 	opacity?: number;
 }
@@ -21,12 +23,14 @@ export interface FadeParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
+	condition?: ConditionFunction;
 }
 
 export interface FlyParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
+	condition?: ConditionFunction;
 	x?: number | string;
 	y?: number | string;
 	opacity?: number;
@@ -36,6 +40,7 @@ export interface SlideParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
+	condition?: ConditionFunction;
 	axis?: 'x' | 'y';
 }
 
@@ -43,6 +48,7 @@ export interface ScaleParams {
 	delay?: number;
 	duration?: number;
 	easing?: EasingFunction;
+	condition?: ConditionFunction;
 	start?: number;
 	opacity?: number;
 }
@@ -52,12 +58,14 @@ export interface DrawParams {
 	speed?: number;
 	duration?: number | ((len: number) => number);
 	easing?: EasingFunction;
+	condition?: ConditionFunction;
 }
 
 export interface CrossfadeParams {
 	delay?: number;
 	duration?: number | ((len: number) => number);
 	easing?: EasingFunction;
+	condition?: ConditionFunction;
 }
 
 export * from './index.js';