blob: 5f5bd036bb8c2812be9781e9836726cc6883a397 (
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
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<script>
import { run } from 'svelte/legacy';
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
/**
* @typedef {Object} Props
* @property {string} [text]
* @property {number} [opacityTransitionDuration]
* @property {any} [blurTransitionDuration]
* @property {any} [easing]
*/
/** @type {Props} */
let {
text = '',
opacityTransitionDuration = 50,
blurTransitionDuration = opacityTransitionDuration,
easing = cubicOut
} = $props();
let previousValue = $state('');
let opacity = tweened(1, { duration: opacityTransitionDuration, easing });
let blur = tweened(0, { duration: blurTransitionDuration, easing });
run(() => {
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>
|