add opacity/easing parameters to blur transition

src/runtime/transition/index.ts

@@ -1,10 +1,12 @@
 import { cubicOut, cubicInOut } from 'svelte/easing';
 import { assign, is_function } from 'svelte/internal';
 
+type EasingFunction = (t: number) => number;
+
 export interface TransitionConfig {
 	delay?: number;
 	duration?: number;
-	easing?: (t: number) => number;
+	easing?: EasingFunction;
 	css?: (t: number, u: number) => string;
 	tick?: (t: number, u: number) => void;
 }
@@ -12,20 +14,29 @@ export interface TransitionConfig {
 interface BlurParams {
 	delay: number;
 	duration: number;
+	easing?: EasingFunction;
 	amount: number;
+	opacity: number;
 }
 
 export function blur(node: Element, {
 	delay = 0,
 	duration = 400,
-	amount = 5
+	easing = cubicInOut,
+	amount = 5,
+	opacity = 0
 }: BlurParams): TransitionConfig {
-	const f = getComputedStyle(node).filter.replace(/^none$/, '');
+	const style = getComputedStyle(node);
+	const target_opacity = +style.opacity;
+	const f = style.filter === 'none' ? '' : style.filter;
+
+	const od = target_opacity * (1 - opacity);
 
 	return {
 		delay,
 		duration,
-		css: (t, u) => `opacity: ${t}; filter: ${f} blur(${u * amount}px);`
+		easing,
+		css: (t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);`
 	};
 }
 
@@ -50,7 +61,7 @@ export function fade(node: Element, {
 interface FlyParams {
 	delay: number;
 	duration: number;
-	easing: (t: number) => number;
+	easing: EasingFunction;
 	x: number;
 	y: number;
 	opacity: number;
@@ -83,7 +94,7 @@ export function fly(node: Element, {
 interface SlideParams {
 	delay: number;
 	duration: number;
-	easing: (t: number) => number;
+	easing: EasingFunction;
 }
 
 export function slide(node: Element, {
@@ -121,7 +132,7 @@ export function slide(node: Element, {
 interface ScaleParams {
 	delay: number;
 	duration: number;
-	easing: (t: number) => number;
+	easing: EasingFunction;
 	start: number;
 	opacity: number;
 }
@@ -155,7 +166,7 @@ interface DrawParams {
 	delay: number;
 	speed: number;
 	duration: number | ((len: number) => number);
-	easing: (t: number) => number;
+	easing: EasingFunction;
 }
 
 export function draw(node: SVGElement & { getTotalLength(): number }, {
@@ -187,7 +198,7 @@ export function draw(node: SVGElement & { getTotalLength(): number }, {
 interface CrossfadeParams {
 	delay: number;
 	duration: number | ((len: number) => number);
-	easing: (t: number) => number;
+	easing: EasingFunction;
 }
 
 type ClientRectMap = Map<any, { rect: ClientRect }>;