diff options
| author | Fuwn <[email protected]> | 2024-04-21 08:23:55 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-21 08:23:55 -0700 |
| commit | 3e09b53e3ad5ddbdb258351f904fa1b4e9aa7740 (patch) | |
| tree | f5be1917892a323cf657a9f8c4c2e190a8318f12 /src | |
| parent | feat(badges): conditional spacing for navigation (diff) | |
| download | due.moe-3e09b53e3ad5ddbdb258351f904fa1b4e9aa7740.tar.xz due.moe-3e09b53e3ad5ddbdb258351f904fa1b4e9aa7740.zip | |
feat(RandomFollower): use TextTransition
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/TextTransition.svelte | 28 | ||||
| -rw-r--r-- | src/lib/Tools/RandomFollower.svelte | 3 |
2 files changed, 30 insertions, 1 deletions
diff --git a/src/lib/TextTransition.svelte b/src/lib/TextTransition.svelte new file mode 100644 index 00000000..bd7814de --- /dev/null +++ b/src/lib/TextTransition.svelte @@ -0,0 +1,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> diff --git a/src/lib/Tools/RandomFollower.svelte b/src/lib/Tools/RandomFollower.svelte index 0bf4d76e..3117b41a 100644 --- a/src/lib/Tools/RandomFollower.svelte +++ b/src/lib/Tools/RandomFollower.svelte @@ -2,6 +2,7 @@ import { followers } from '$lib/Data/AniList/following'; import RateLimited from '$lib/Error/RateLimited.svelte'; import Skeleton from '$lib/Loading/Skeleton.svelte'; + import TextSwap from '$lib/TextTransition.svelte'; import InputTemplate from './InputTemplate.svelte'; let submission = ''; @@ -23,7 +24,7 @@ <p /> <a href={`https://anilist.co/user/${user.id}`} target="_blank"> - {user.name} + <TextSwap text={user.name} /> </a> {:catch} <RateLimited type="Followers" list={false} /> |