跳至主要内容

Svelte 过渡引擎的一个特别强大的功能是能够延迟过渡,以便可以在多个元素之间协调它们。

以这对待办事项列表为例,其中切换待办事项会将其发送到相反的列表。在现实世界中,对象的行为并非如此——它们不会在另一个地方消失和重新出现,而是会通过一系列中间位置移动。使用运动可以极大地帮助用户理解应用程序中正在发生的事情。

我们可以使用crossfade函数实现此效果,如transition.js中所示,该函数创建了一对名为sendreceive的过渡。当一个元素被“发送”时,它会寻找一个相应的被“接收”的元素,并生成一个将元素转换为其对应元素的位置并淡出的过渡。当一个元素被“接收”时,则会发生相反的情况。如果没有对应元素,则使用fallback过渡。

打开TodoList.svelte。首先,从transition.js导入sendreceive过渡。

TodoList
<script>
	import { send, receive } from './transition.js';

	let { todos, remove } = $props();
</script>

然后,将它们添加到<li>元素中,使用todo.id属性作为键来匹配元素。

TodoList
<li
	class:done={todo.done}
	in:receive={{ key: todo.id }}
	out:send={{ key: todo.id }}
>

现在,当您切换项目时,它们会平滑地移动到新位置。未过渡的项目仍然会笨拙地跳动——我们可以在下一节练习中解决这个问题。

在 GitHub 上编辑此页面

上一步 下一步
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script>
	import TodoList from './TodoList.svelte';
 
	const todos = $state([
		{ done: false, description: 'write some docs' },
		{ done: false, description: 'start writing blog post' },
		{ done: true, description: 'buy some milk' },
		{ done: false, description: 'mow the lawn' },
		{ done: false, description: 'feed the turtle' },
		{ done: false, description: 'fix some bugs' }
	]);
 
	function remove(todo) {
		const index = todos.indexOf(todo);
		todos.splice(index, 1);
	}
</script>
 
<div class="board">
	<input
		placeholder="what needs to be done?"
		onkeydown={(e) => {
			if (e.key !== 'Enter') return;
 
			todos.push({
				done: false,
				description: e.currentTarget.value
			});
 
			e.currentTarget.value = '';
		}}
	/>
 
	<div class="todo">
		<h2>todo</h2>
		<TodoList todos={todos.filter((t) => !t.done)} {remove} />
	</div>
 
	<div class="done">
		<h2>done</h2>
		<TodoList todos={todos.filter((t) => t.done)} {remove} />
	</div>
</div>
 
<style>
	.board {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 1em;
		max-width: 36em;
		margin: 0 auto;
	}
 
	.board > input {
		font-size: 1.4em;
		grid-column: 1/3;
		padding: 0.5em;
		margin: 0 0 1rem 0;
	}
 
	h2 {
		font-size: 2em;
		font-weight: 200;
	}
</style>