Vue Academy · Урок

Хуки переходов JavaScript

Хуки @before-enter, @enter, @after-enter, @leave, использование GSAP для сложных анимаций

«Хуки переходов JavaScript» — бесплатный урок Vue Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Зачем нужны хуки JavaScript

CSS-классы подходят для большинства случаев, но для некоторых анимаций нужен JavaScript — например, для подключения библиотек вроде GSAP, анимации холста или вычисления динамических значений. <Transition> предоставляет хуки жизненного цикла именно для таких задач.

Доступные хуки

Vue создаёт события для каждой фазы: @before-enter, @enter, @after-enter, @enter-cancelled и соответствующие хуки выхода.

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @leave="onLeave"
>
  <div v-if="show">Animated by JS</div>
</Transition>

before-enter задаёт исходное состояние

@before-enter получает элемент DOM и выполняется до его вставки. Используйте его, чтобы задать начальные стили, так же как это сделал бы класс enter-from.

function onBeforeEnter(el) {
  el.style.opacity = 0;
  el.style.transform = "translateY(20px)";
}

enter получает el и done

@enter получает два аргумента: элемент и обратный вызов done. Анимируйте элемент, а после завершения вызовите done(), чтобы Vue узнал, что переход завершён.

function onEnter(el, done) {
  // animate to final state
  el.style.transition = "all 0.4s ease";
  el.style.opacity = 1;
  el.style.transform = "translateY(0)";
  el.addEventListener("transitionend", done, { once: true });
}

Всегда вызывайте done

Если забыть вызвать done(), Vue будет ждать бесконечно, и переход никогда не завершится: after-enter не сработает, а элемент может остаться в промежуточном состоянии анимации. Вызов этого метода обязателен в хуках, управляемых через JS.

function onEnter(el, done) {
  // ... animate ...
  setTimeout(done, 400); // fallback if no transitionend
}

leave с done

Хук @leave работает так же: анимируйте выход элемента, а затем вызовите done(), чтобы Vue удалил его из DOM.

function onLeave(el, done) {
  el.style.transition = "all 0.3s ease";
  el.style.opacity = 0;
  el.addEventListener("transitionend", done, { once: true });
}

after-enter для очистки

@after-enter выполняется после завершения входа. Используйте его, чтобы удалить встроенные стили, сбросить свойства перехода или запустить последующую логику.

function onAfterEnter(el) {
  el.style.transition = "";
  el.style.transform = "";
}

Пропускайте CSS с :css="false"

Если анимация выполняется только через JS, задайте :css="false". Это указывает Vue полностью пропустить обнаружение CSS-классов и полагаться только на обратные вызовы done при определении времени. Кроме того, это предотвращает случайное вмешательство CSS.

<Transition
  :css="false"
  @enter="onEnter"
  @leave="onLeave"
>
  <div v-if="show">Pure JS animation</div>
</Transition>

Интеграция GSAP

Хуки JS особенно полезны вместе с библиотеками анимации. GSAP может плавно изменять свойства элемента и принимать done как обратный вызов onComplete.

function onEnter(el, done) {
  gsap.from(el, {
    opacity: 0,
    y: 30,
    duration: 0.4,
    onComplete: done
  });
}

Хуки отмены

@enter-cancelled и @leave-cancelled срабатывают, если переход прерывается, например когда пользователь быстро меняет состояние. Используйте их, чтобы остановить выполняющиеся твины и не оставлять после них лишнее состояние.

function onEnterCancelled(el) {
  gsap.killTweensOf(el);
}

Когда выбирать хуки JS

Выбирайте хуки JS, когда нужны физика, динамические значения для отдельных элементов, интеграция с библиотеками или точная последовательность действий. Для простых затуханий и сдвигов CSS-классы остаются более простым и производительным решением.

Быстрая проверка

Зачем передавать :css="false" вместе с хуками JavaScript?

Повторение

Вы изучили хуки переходов JS: @before-enter (задаёт исходное состояние), @enter/@leave (анимируют элемент, а затем вызывают done), @after-enter (выполняет очистку), а также :css="false" для отключения CSS-классов и хуки отмены для обработки прерываний.

Часто задаваемые вопросы

Урок «Хуки переходов JavaScript» бесплатный?

Да — полный текст урока «Хуки переходов JavaScript» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Хуки переходов JavaScript»?

Хуки @before-enter, @enter, @after-enter, @leave, использование GSAP для сложных анимаций Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Хуки переходов JavaScript»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy