From ede38133237062a38a1ae310a386604ce33d1674 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 7 Sep 2019 15:16:05 -0400
Subject: [PATCH] add opacity/easing parameters to blur transition

---
 src/runtime/transition/index.ts | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/runtime/transition/index.ts b/src/runtime/transition/index.ts
index 0d4c4ebf54..98d2701123 100644
--- a/src/runtime/transition/index.ts
+++ b/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 }>;