Các khối khóa (key blocks) hủy và tạo lại nội dung của chúng khi giá trị của biểu thức thay đổi. Điều này rất hữu ích trong trường hợp bạn muốn một phần tử chạy hiệu ứng chuyển tiếp mỗi khi giá trị thay đổi thay vì chỉ khi phần tử vào hoặc rời khỏi DOM.
Ở đây, ví dụ, chúng ta muốn chạy hiệu ứng chuyển tiếp typewriter từ transition.js mỗi khi thông báo tải, tức là i, thay đổi. Bọc phần tử <p> trong một khối khóa:
App.svelte
{#key i}
<p in:typewriter={{ speed: 10 }}>
{messages[i] || ''}
</p>
{/key}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
import { onMount } from 'svelte'; import { typewriter } from './transition.js'; import { messages } from './loading-messages.js';let i = -1;
onMount(() => { const interval = setInterval(() => {i += 1;
i %= messages.length;
}, 2500);
return () => {clearInterval(interval);
};
});
</script>
<h1>đang tải...</h1>
<p in:typewriter={{ speed: 10 }}> {messages[i] || ''}</p>