diff options
| author | Fuwn <[email protected]> | 2024-10-09 00:41:20 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-10-09 00:41:43 -0700 |
| commit | 998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch) | |
| tree | 50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Layout/TextTransition.svelte | |
| parent | feat(graphql): add badgeCount field (diff) | |
| download | due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.tar.xz due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.zip | |
chore(prettier): use spaces instead of tabs
Diffstat (limited to 'src/lib/Layout/TextTransition.svelte')
| -rw-r--r-- | src/lib/Layout/TextTransition.svelte | 36 |
1 files changed, 18 insertions, 18 deletions
diff --git a/src/lib/Layout/TextTransition.svelte b/src/lib/Layout/TextTransition.svelte index bd7814de..35cfe1ea 100644 --- a/src/lib/Layout/TextTransition.svelte +++ b/src/lib/Layout/TextTransition.svelte @@ -1,28 +1,28 @@ <script> - import { tweened } from 'svelte/motion'; - import { cubicOut } from 'svelte/easing'; + 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; + 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 }); + 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; + $: { + if (text !== previousValue) + Promise.all([opacity.set(0), blur.set(10)]).then(() => { + previousValue = text; - Promise.all([opacity.set(1), blur.set(0)]); - }); - } + Promise.all([opacity.set(1), blur.set(0)]); + }); + } </script> <span - style="opacity: {$opacity}; filter: blur({$blur}px); transition: opacity {opacityTransitionDuration}ms, filter {blurTransitionDuration}ms;" + style="opacity: {$opacity}; filter: blur({$blur}px); transition: opacity {opacityTransitionDuration}ms, filter {blurTransitionDuration}ms;" > - {previousValue} + {previousValue} </span> |