blob: a31b3ae388bd80cc0b8c4af3b6d5da1580d747c7 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<script>
import { tweened } from "svelte/motion";
import { cubicOut } from "svelte/easing";
export let text = "";
export let opacityTransitionDuration = 50;
export let blurTransitionDuration = opacityTransitionDuration;
export let easing = cubicOut;
let previousValue = "";
let opacity = tweened(1, { duration: opacityTransitionDuration, easing });
let blur = tweened(0, { duration: blurTransitionDuration, easing });
$: {
if (text !== previousValue)
Promise.all([opacity.set(0), blur.set(10)]).then(() => {
previousValue = text;
Promise.all([opacity.set(1), blur.set(0)]);
});
}
</script>
<span
style="opacity: {$opacity}; filter: blur({$blur}px); transition: opacity {opacityTransitionDuration}ms, filter {blurTransitionDuration}ms;"
>
{previousValue}
</span>
|