1  import { cubicOut } from 'svelte/easing';
 2  import type { EasingFunction, TransitionConfig } from 'svelte/transition';
 3  
 4  interface FlyAndBlurParams {
 5      // Time (ms) before the animation starts.
 6      delay?: number;
 7      // Total animation time (ms).
 8      duration?: number;
 9      // Easing function (defaults to cubicOut).
10      easing?: EasingFunction;
11      // Horizontal offset in pixels at start (like `fly`).
12      x?: number;
13      // Vertical offset in pixels at start (like `fly`).
14      y?: number;
15      // Initial blur radius in pixels.
16      blur?: number;
17  }
18  
19  export function flyAndBlur(
20      node: Element,
21      {
22          delay = 0,
23          duration = 420,
24          easing = cubicOut,
25          x = 0,
26          y = 0,
27          blur = 3,
28      }: FlyAndBlurParams = {},
29  ): TransitionConfig {
30      const style = getComputedStyle(node);
31      const initialOpacity = +style.opacity;
32  
33      return {
34          delay,
35          duration,
36          easing,
37          css: (t: number, u: number) => {
38              return `
39                      transform: translate(${x * u}px, ${y * u}px);
40                      opacity: ${initialOpacity * t};
41                      filter: blur(${blur * u}px);
42                  `;
43          },
44      };
45  }