Skip to main content

В предыдущем уроке мы использовали отложенные переходы, чтобы создать иллюзию движения, при перемещении элементов из одного списка задач в другой.

Чтобы завершить иллюзию, нам нужно, чтобы элементы, которые остаются в списке тоже двигались плавно. Для этого мы используем директиву animate.

Сначала, импортируйте функцию flip из svelte/animate:

import { flip } from 'svelte/animate';

flip - это аббревиатура от слов 'First, Last, Invert, Play'

Затем добавьте новую директиву в оба элемента <label>:

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

Во втором случае мы можем немного ускорить анимацию, добавив параметр duration:

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

duration также может являться функцией d => миллисекунд, где d - количество пикселей, которое должен пройти элемент.

Обратите внимание, что все переходы и анимации осуществляются при помощи CSS, а не JavaScript, поэтому они не будут блокировать выполнение основного потока.