Skip to main content

Особенно мощная особенность движка переходов в Svelte - возможность отложить переходы, чтобы их можно было координировать между несколькими элементами.

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

Мы можем достичь такого же эффекта, используя функцию crossfade, которая создает пару переходов, называемых send и receive. Когда элемент исчезает, срабатывает переход send, при этом ищется соответствующий элемент, который должен появиться, и генерируется перемещение первого элемента на позицию второго с последующим его удалением. При появлении элемента срабатывает переход receive и происходит обратное действие. Если у элемента нет соответствующего второго элемента, используется переход из параметра fallback.

Найдите элемент <label> в строке 65 и добавьте переходы send и receive:

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

Сделайте тоже самое со следующим элементом <label>:

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

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