Параметры перехода: node duration delay
Принимайте узел и объект параметров в функции перехода для большей гибкости
«Параметры перехода: node duration delay» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Сигнатура функции
Пользовательские переходы принимают (node, params), что обеспечивает гибкость.
Чтение узла
Используйте узел, чтобы вычислять такие свойства, как его текущий размер или положение.
const rect = node.getBoundingClientRect();Передача параметров
Пользовательский код передаёт параметры с помощью директивы.
<p transition:spin={{ duration: 800 }}>...Значения по умолчанию
Обрабатывайте отсутствующие параметры с помощью значений по умолчанию внутри функции.
function spin(node, { duration = 600 } = {}) { ... }Реактивные параметры
Изменения параметров не перезапускают переход в процессе выполнения; при следующем монтировании используется новое значение.
Вычисляемая длительность
Вы можете вычислять длительность на основе данных, например по длине слова для эффекта печатной машинки.
Параметр сглаживания
Принимайте параметр сглаживания, чтобы пользовательский код мог настраивать кривую.
Параметр задержки
Создавайте задержку между появлениями, передавая задержку, вычисленную по индексу.
{#each items as item, i}
<p transition:fly={{ delay: i * 50 }}>{item}</p>
{/each}Советы по строкам CSS
Возвращайте комбинируемые преобразования и избегайте свойств вроде top/left, вызывающих перерасчёт макета.
Производительность
Ограничивайтесь преобразованием и прозрачностью для очень плавной анимации.
Тестирование
Проверяйте вычисленные стили во время перехода с помощью браузерных DevTools.
Быстрая проверка
Что предоставляет объект параметров?
Итоги
Принимайте и используйте params для гибких переходов. Задавайте значения по умолчанию для отсутствующих значений.
Часто задаваемые вопросы
Урок «Параметры перехода: node duration delay» бесплатный?
Да — полный текст урока «Параметры перехода: node duration delay» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Параметры перехода: node duration delay»?
Принимайте узел и объект параметров в функции перехода для большей гибкости Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Параметры перехода: node duration delay»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Написание пользовательской функции перехода
- Параметры перехода: node duration delay
- Создание морфинг-перехода
- Переходы CSS и JS