0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Svelteのカウントアップアニメーション

Posted at

Svelteで使えるカウントアップアニメーションが欲しい
ので、公式のタイプライターアニメーションを参考にしつつ作ってみた。

{#if true}
    <span class="result-length">Result: 
        <span in:countUp={{}}>{result}</span>
    </span>
{/if}

<script lang="ts">
let result = 1000;

function countUp(node, { speed = 3 }) {
		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE && !isNaN(node.textContent);

		if (!valid) {
			throw new Error(`This transition only works on elements with a single number type node child`);
		}

		const goal_number = Number(node.textContent);
		const duration = goal_number / (speed * 1);

		return {
			duration,
			tick: t => {
				// console.log(~~(goal_number * t));
				const i = ~~(goal_number * t);
				node.textContent = i;
			},
		};
	}
</script>

中途半端なので、加減速とかの処理は入ってません。

公式のアニメーション

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?