diff options
| author | Fuwn <[email protected]> | 2024-04-21 19:49:11 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-21 19:49:11 -0700 |
| commit | c1fd147363649540e595cab849b5ebe75a02a581 (patch) | |
| tree | 04be39a98f5e75f06bccf4de52d940b49267a2b5 /src/lib/TextTransition.svelte | |
| parent | feat(RandomFollower): use TextTransition (diff) | |
| download | due.moe-c1fd147363649540e595cab849b5ebe75a02a581.tar.xz due.moe-c1fd147363649540e595cab849b5ebe75a02a581.zip | |
refactor(TextTransition): move to Layout
Diffstat (limited to 'src/lib/TextTransition.svelte')
| -rw-r--r-- | src/lib/TextTransition.svelte | 28 |
1 files changed, 0 insertions, 28 deletions
diff --git a/src/lib/TextTransition.svelte b/src/lib/TextTransition.svelte deleted file mode 100644 index bd7814de..00000000 --- a/src/lib/TextTransition.svelte +++ /dev/null @@ -1,28 +0,0 @@ -<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> |