Mặc dù bạn nên sử dụng CSS cho chuyển tiếp nhiều nhất có thể, có một số hiệu ứng không thể chạy được mà không có JavaScript, như hiệu ứng máy đánh chữ:
App.svelte
function typewriter(node, { speed = 1 }) {
const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
if (!valid) {
throw new Error(`Quá trình chuyển tiếp này chỉ hoạt động trên các phần tử có một node văn bản con`);
}
const text = node.textContent;
const duration = text.length / (speed * 0.01);
return {
duration,
tick: (t) => {
const i = Math.trunc(text.length * t);
node.textContent = text.slice(0, i);
}
};
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
let visible = false;
function typewriter(node, { speed = 1 }) {const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
if (!valid) {throw new Error(`Quá trình chuyển tiếp này chỉ hoạt động trên các phần tử có một node văn bản con`);
}
return {};}
</script>
<label>
<input type="checkbox" bind:checked={visible} />hiện
</label>
{#if visible}<p transition:typewriter>
The quick brown fox jumps over the lazy dog
</p>
{/if}