30 lines
886 B
Vue
30 lines
886 B
Vue
|
<script setup lang="ts">
|
||
|
|
import { useInView } from "motion-v";
|
||
|
|
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{ end: number; suffix?: string; duration?: number }>(),
|
||
|
|
{ suffix: "", duration: 1800 },
|
||
|
|
);
|
||
|
|
|
||
|
|
const el = ref<HTMLSpanElement | null>(null);
|
||
|
|
const inView = useInView(el, { once: true, margin: "-60px" });
|
||
|
|
const val = ref(0);
|
||
|
|
let raf = 0;
|
||
|
|
|
||
|
|
watch(inView, (v) => {
|
||
|
|
if (!v) return;
|
||
|
|
const t0 = performance.now();
|
||
|
|
const tick = (t: number) => {
|
||
|
|
const p = Math.min(1, (t - t0) / props.duration);
|
||
|
|
val.value = Math.round(props.end * (1 - Math.pow(1 - p, 3)));
|
||
|
|
if (p < 1) raf = requestAnimationFrame(tick);
|
||
|
|
};
|
||
|
|
raf = requestAnimationFrame(tick);
|
||
|
|
});
|
||
|
|
onBeforeUnmount(() => cancelAnimationFrame(raf));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<span ref="el" class="tabular-nums">{{ val.toLocaleString("fa-IR") }}<span v-if="suffix" class="text-accent">{{ suffix }}</span></span>
|
||
|
|
</template>
|