Переходы CSS и JS
Выбирайте между переходами на основе ключевых кадров CSS и функциями tick на JavaScript
«Переходы CSS и JS» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Два режима
Пользовательские переходы возвращают либо функцию css (GPU), либо функцию tick (управляемую JS для каждого кадра).
Когда использовать CSS
Для преобразования, прозрачности, цвета — всего, что умеет анимировать CSS. CSS выполняется на компоновщике, обеспечивая 60 кадров в секунду.
Когда использовать пошаговое обновление
Для изменений текста, пикселей canvas или других свойств, не относящихся к CSS.
Стоимость пошагового обновления
Пошаговое обновление выполняется в каждом кадре анимации на JavaScript. Оно затратнее, чем CSS.
Гибридный подход
Некоторые переходы могут использовать CSS для визуальных эффектов и пошаговое обновление для периодических изменений, не относящихся к CSS.
Кроссбраузерность
Анимации CSS поддерживаются повсеместно, а пошаговое обновление доступно всегда, поскольку выполняется на JS.
Специальные возможности
Оба варианта учитывают prefers-reduced-motion, если проверить его внутри перехода.
Профилирование
Используйте вкладку производительности, чтобы сравнить реализации на CSS и с пошаговым обновлением.
Шаблон резервного варианта
Если CSS не позволяет добиться нужного эффекта, корректно переходите к пошаговому обновлению.
Комбинирование
Несколько элементов с разными переходами могут сочетать CSS и пошаговое обновление в одном представлении.
Рекомендация
По умолчанию используйте CSS. Обращайтесь к пошаговому обновлению только тогда, когда CSS действительно не может выразить анимацию.
Быстрая проверка
Когда в переходе следует предпочесть функцию css?
Итоги
Выбирайте css для переходов с ускорением GPU, а пошаговое обновление оставляйте для анимаций, не поддерживаемых CSS, например изменений текста или canvas.
Часто задаваемые вопросы
Урок «Переходы CSS и JS» бесплатный?
Да — полный текст урока «Переходы CSS и JS» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Переходы CSS и JS»?
Выбирайте между переходами на основе ключевых кадров CSS и функциями tick на JavaScript Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Переходы CSS и JS»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Написание пользовательской функции перехода
- Параметры перехода: node duration delay
- Создание морфинг-перехода
- Переходы CSS и JS