Написание пользовательской функции перехода
Возвращайте функции CSS или tick из пользовательского перехода, чтобы анимировать появление и исчезновение элементов DOM
«Написание пользовательской функции перехода» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Пользовательские переходы
Помимо встроенных вариантов, Вы можете создавать полностью пользовательские функции переходов.
Сигнатура функции
Функция перехода принимает (node, params) и возвращает объект параметров.
function spin(node) {
return {
duration: 600,
css: (t) => `transform: rotate(${t * 360}deg); opacity: ${t};`
};
}Используйте свой переход
Применяйте его с помощью transition:spin к любому элементу.
Функция CSS
Возвращайте функцию css(t, u). Значение t изменяется от 0 до 1, а u — от 1 до 0.
Функция JS (пошаговое обновление)
Для значений, которые нельзя анимировать с помощью CSS, вместо неё возвращайте функцию tick.
tick: (t) => node.textContent = Math.floor(t * 100) + "%";Когда использовать CSS, а когда пошаговое обновление
CSS работает быстрее, поскольку использует GPU. Используйте пошаговое обновление только тогда, когда изменение нельзя выразить средствами CSS.
Сглаживание
Применяйте сглаживание внутри своей функции или принимайте его как параметр.
Задержка и длительность
Возвращайте delay и duration в объекте параметров.
Повторно используемая библиотека
Создайте модуль переходов для своей дизайн-системы.
Учёт направления
При входе фреймворк вызывает Вашу функцию, а при выходе используется противоположное направление.
Сочетание с in/out
Вы можете использовать одну пользовательскую функцию для входа, а другую — для выхода с помощью in: и out:.
Быстрая проверка
Что получает функция css в переходе?
Итоги
Определяйте пользовательские переходы, возвращая из функции { duration, css } или { duration, tick }.
Часто задаваемые вопросы
Урок «Написание пользовательской функции перехода» бесплатный?
Да — полный текст урока «Написание пользовательской функции перехода» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Написание пользовательской функции перехода»?
Возвращайте функции CSS или tick из пользовательского перехода, чтобы анимировать появление и исчезновение элементов DOM Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Написание пользовательской функции перехода»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Написание пользовательской функции перехода
- Параметры перехода: node duration delay
- Создание морфинг-перехода
- Переходы CSS и JS