在 上一章 中，我们使用延迟转场来创建元素从一个待办事项列表移动到另一个待办事项列表时的运动错觉。

英In the previous chapter, we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.

为了完成幻觉，我们还需要对不转场的元素应用运动。 为此，我们使用 animate 指令。

英To complete the illusion, we also need to apply motion to the elements that aren't transitioning. For this, we use the animate directive.

首先导入 flip 函数 — 翻转代表 '第一个、最后一个、反转、播放' — 来自 svelte/animate：

英First, import the flip function — flip stands for 'First, Last, Invert, Play' — from svelte/animate:

ts
import { flip } from 'svelte/animate';

然后将其添加到 <label> 元素中：

英Then add it to the <label> elements:

<label
	in:receive="{{key: todo.id}}"
	out:send="{{key: todo.id}}"
	animate:flip
>

这种情况下移动有点慢，所以我们可以添加一个 duration 参数：

英The movement is a little slow in this case, so we can add a duration parameter:

<label
	in:receive="{{key: todo.id}}"
	out:send="{{key: todo.id}}"
	animate:flip="{{duration: 200}}"
>

duration 也可以是 d => milliseconds 函数，其中 d 是元素必须移动的像素数

请注意，所有转场和动画都是通过 CSS 应用的，而不是 JavaScript，这意味着它们不会阻塞（或被阻塞）主线程。

英Note that all the transitions and animations are being applied with CSS, rather than JavaScript, meaning they won't block (or be blocked by) the main thread.