Параметры перехода: duration delay easing
Настраивайте переходы, передавая параметры duration, delay и easing
«Параметры перехода: duration delay easing» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Объект параметров
Все переходы принимают объект параметров в качестве второго аргумента.
<p transition:fade={{ duration: 600, delay: 200 }}>Длительность
Общая продолжительность анимации в миллисекундах. Значение по умолчанию — 400 мс.
Задержка
Время ожидания перед началом анимации. Полезно для последовательного отображения элементов интерфейса.
Функция плавности
Функция, преобразующая линейный прогресс (от 0 до 1) в пользовательскую кривую. По умолчанию используется линейная зависимость.
Встроенные функции плавности
Импортируйте их из svelte/easing: linear, quadIn, cubicOut, elasticOut и т. д.
import { elasticOut } from "svelte/easing";Параметры каждого перехода
У каждого перехода есть собственные параметры. Переход с перемещением добавляет x и y, а переход с масштабированием — start.
Выбор длительности
Используйте короткую длительность (100–200 мс) для микро-взаимодействий и более длительную (400–700 мс) для переходов между страницами.
Реактивные параметры
Значения параметров могут зависеть от реактивного состояния.
<p transition:fly={{ x: dir * 200 }}>...Поведение по умолчанию
Если не передать объект параметров, применяются разумные значения по умолчанию.
Соответствие дизайну
Настраивайте длительность и функцию плавности, пока движение не станет естественным; проверяйте результат на реальном устройстве.
Доступность
Учитывайте настройку prefers-reduced-motion, уменьшая длительность или пропуская переходы.
Быстрая проверка
Откуда берутся функции плавности?
Резюме
Настраивайте duration, delay и easing из svelte/easing, чтобы добиться нужного эффекта.
Часто задаваемые вопросы
Урок «Параметры перехода: duration delay easing» бесплатный?
Да — полный текст урока «Параметры перехода: duration delay easing» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Параметры перехода: duration delay easing»?
Настраивайте переходы, передавая параметры duration, delay и easing Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Параметры перехода: duration delay easing»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- transition:fade и transition:fly
- Параметры перехода: duration delay easing
- in: и out: для асимметричных переходов
- transition:draw для путей SVG