in: и out: для асимметричных переходов
Задавайте разные переходы для появления и исчезновения элементов
«in: и out: для асимметричных переходов» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем нужны асимметричные переходы
Иногда для появления и исчезновения элемента нужны разные анимации.
Директива in:
Применяйте переход только при добавлении элемента.
<p in:fly={{ y: 50 }}>Enter</p>Директива out:
Применяйте переход только при удалении элемента.
<p out:fade>Leave</p>Использование обеих директив
Используйте обе директивы на одном элементе для полностью настраиваемых анимаций появления и исчезновения.
<p in:fly={{ y: 50 }} out:fade={{ duration: 200 }}>...</p>Разные функции
Переходы появления и исчезновения могут быть совершенно разными функциями, например перемещением и затуханием.
Разные параметры
Передавайте разные значения длительности, задержки или функции плавности для каждого направления.
Использование в блоках #if
Элемент должен создаваться и удаляться реактивно, как и при обычных переходах.
Не используйте одновременно transition: и in:/out:
Выбирайте либо transition: для симметричного перехода, либо in:/out: для асимметричного. Их сочетание приводит к конфликтам.
Реальный пример
Всплывающее уведомление может появляться сверху с перемещением, а исчезать на месте с затуханием.
<div in:fly={{ y: -50 }} out:fade>{message}</div>Производительность
Каждый переход расходует ресурсы CPU. Используйте переходы умеренно в больших списках.
Итоговый шаблон
Асимметричные переходы — быстрый способ улучшить интерфейс: появление ощущается приветливым, а исчезновение — быстрым.
Быстрая проверка
Чем отличаются in: и out:?
Резюме
Используйте in: для появления, а out: — для исчезновения. Сочетайте их для создания асимметричных и отточенных переходов.
Часто задаваемые вопросы
Урок «in: и out: для асимметричных переходов» бесплатный?
Да — полный текст урока «in: и out: для асимметричных переходов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «in: и out: для асимметричных переходов»?
Задавайте разные переходы для появления и исчезновения элементов Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «in: и out: для асимметричных переходов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- transition:fade и transition:fly
- Параметры перехода: duration delay easing
- in: и out: для асимметричных переходов
- transition:draw для путей SVG