Svelte基础
Svelte高阶
上下文API
特殊元素
接下来
SvelteKit基础
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
恭喜小主,贺喜小主,马上就大圆满了。
修炼完Key代码块就能突破到下个大境界了。
Key代码块会在key表达式改变时销毁和重建它所包含的小世界。有时候我们希望某个值发生变化时就重新执行转场,而不是只在所绑定元素被添加或移除时。
此时我们应该举个例子🌰:每次加载信息时,也就是i
变化时,都播放打字机
效果,我们可以把<p>
元素包括在一个key代码块里:
Key blocks destroy and recreate their contents when the value of an expression changes. This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM. Here, for example, we’d like to play the
typewriter
transition fromtransition.js
whenever the loading message, i.e.i
changes. Wrap the<p>
element in a key block:
App
{#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 { typewriter } from './transition.js';
import { messages } from './loading-messages.js';
let i = $state(-1);
$effect(() => {
const interval = setInterval(() => {
i += 1;
i %= messages.length;
}, 2500);
return () => {
clearInterval(interval);
};
});
</script>
<h1>loading...</h1>
<p in:typewriter={{ speed: 10 }}>
{messages[i] || ''}
</p>