transition:fade и transition:fly
Применяйте встроенные переходы fade и fly к элементам, управляемым блоком {#if}
«transition:fade и transition:fly» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Встроенные переходы
Svelte поставляется с несколькими переходами в svelte/transition: затуханием, перемещением, скольжением, масштабированием, размытием и прорисовкой.
Импорт перехода
Подключите необходимые переходы.
import { fade, fly } from "svelte/transition";Добавление с помощью transition:
Применяйте переход с помощью transition: к элементу, управляемому блоком {#if}.
{#if visible}
<p transition:fade>Hello</p>
{/if}Переход с перемещением
Переход с перемещением переносит элементы из положения со смещёнными координатами в нужную позицию.
{#if visible}
<div transition:fly={{ x: -200, duration: 400 }}>Slide in</div>
{/if}Объект параметров
Передавайте такие параметры, как x, y, duration, delay и easing.
Когда срабатывают триггеры
Переходы выполняются при монтировании и размонтировании элемента внутри блоков {#if}, {#each} или {#await}.
Объединение переходов
Применяйте по одному переходу на директиву. Используйте in: и out: для асимметричных переходов.
Плавный интерфейс
Переходы делают интерфейс более отточенным, избавляя от необходимости вручную писать ключевые кадры.
Производительность
Встроенные переходы по возможности используют CSS для ускорения с помощью GPU.
Уменьшение движения
Учитывайте настройку prefers-reduced-motion, применяя переходы только при необходимости.
Функция плавности
Передавайте функцию плавности из svelte/easing, чтобы создавать более выразительные движения.
import { cubicOut } from "svelte/easing";
<p transition:fade={{ easing: cubicOut }}>...</p>Быстрая проверка
Где выполняются переходы?
Резюме
Импортируйте переходы из svelte/transition, добавляйте их с помощью transition: и передавайте объекты параметров для управления.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 41
- Уроки
- 163
Часто задаваемые вопросы
Урок «transition:fade и transition:fly» бесплатный?
Да — полный текст урока «transition:fade и transition:fly» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «transition:fade и transition:fly»?
Применяйте встроенные переходы fade и fly к элементам, управляемым блоком {#if} Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «transition:fade и transition:fly»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- transition:fade и transition:fly
- Параметры перехода: duration delay easing
- in: и out: для асимметричных переходов
- transition:draw для путей SVG