diff options
| -rw-r--r-- | src/lib/Layout/NumberTicker.svelte | 36 | ||||
| -rw-r--r-- | src/lib/List/ListTitle.svelte | 4 |
2 files changed, 40 insertions, 0 deletions
diff --git a/src/lib/Layout/NumberTicker.svelte b/src/lib/Layout/NumberTicker.svelte new file mode 100644 index 00000000..1d09c3ef --- /dev/null +++ b/src/lib/Layout/NumberTicker.svelte @@ -0,0 +1,36 @@ +<script> + import { tweened } from 'svelte/motion'; + import { cubicOut } from 'svelte/easing'; + + export let start = 0; + export let end = 100; + export let duration = 2000; + export let delay = 0; + + const count = tweened(start, { + duration: duration, + easing: cubicOut, + delay: delay + }); + + $: { + count.set(end); + } +</script> + +<span class="counter" class:visible={$count !== start}> + {Math.round($count)} +</span> + +<style lang="scss"> + .counter { + $duration: 0.2s; + + opacity: 0; + transition: opacity $duration ease-out, transform $duration ease-out; + } + + .counter.visible { + opacity: 1; + } +</style> diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte index 0112963f..2c597c09 100644 --- a/src/lib/List/ListTitle.svelte +++ b/src/lib/List/ListTitle.svelte @@ -16,6 +16,10 @@ <summary> <span title={title.hint || undefined} use:tooltip>{title.title}</span> {#if !hideCount}[{count === -1337 ? '...' : count}]{/if} + <!-- {#if !hideCount}[{#if count === -1337}...{:else}<NumberTicker + end={count} + duration={Math.min(2500, Math.max(500, Math.abs(count - 0) * 10))} + />{/if}]{/if} --> {#if !hideTime} <small class="opaque">{time ? time.toFixed(3) : '...'}s</small> {/if} |