Переход между шагами

Intro.js предоставляет гибкие возможности для управления переходами между шагами интерактивного тура. Основным инструментом являются методы nextStep(), previousStep() и события, связанные с переходами, что позволяет создавать как линейные, так и нелинейные последовательности шагов.

Автоматическое движение между шагами

По умолчанию Intro.js использует линейный переход: при нажатии кнопки “Next” активируется следующий шаг. Для ручного управления используется объект конфигурации при инициализации:

const intro = introJs();
intro.setOptions({
  steps: [
    { element: '#step1', intro: 'Первый шаг' },
    { element: '#step2', intro: 'Второй шаг' },
    { element: '#step3', intro: 'Третий шаг' }
  ],
  showStepNumbers: true,
  showButtons: true
});
intro.start();

В этом случае переход осуществляется автоматически кнопками интерфейса, но также возможен вызов методов вручную:

intro.nextStep(); // Переход к следующему шагу
intro.previousStep(); // Возврат к предыдущему шагу

Программное управление порядком шагов

Можно создавать нелинейные туры, используя обработчики событий onchange или onafterchange. Это позволяет определить логику перехода в зависимости от действий пользователя или состояния приложения:

intro.onafterchange(function(targetElement) {
  if (targetElement.id === 'step2') {
    // Пропускаем шаг 3 и переходим сразу к шагу 4
    intro.goToStep(4).start();
  }
});

Метод goToStep(number) позволяет перемещаться к любому шагу по его порядковому номеру, что открывает возможности для ветвящихся сценариев.

Настройка анимации переходов

Intro.js поддерживает плавные переходы с помощью CSS-анимаций. Параметры анимации задаются через классы элементов подсказки (introjs-tooltip) и могут быть переопределены через CSS:

.introjs-tooltip {
  transition: all 0.5s ease-in-out;
}
.introjs-helperLayer {
  transition: all 0.5s ease-in-out;
}

Это позволяет контролировать скорость появления и скрытия подсказок, а также движение подсветки целевых элементов.

Обработка событий перехода

Intro.js предоставляет ряд событий для тонкого контроля:

  • onbeforechange(targetElement) — вызывается перед переходом к следующему шагу. Можно отменить переход, вернув false.
  • onchange(targetElement) — вызывается при активации нового шага.
  • onafterchange(targetElement) — вызывается после того, как шаг полностью отобразился.
  • oncomplete() — вызывается после завершения тура.
  • onexit() — вызывается при выходе из тура пользователем.

Пример динамического контроля:

intro.onbeforechange(function(targetElement) {
  if (targetElement.id === 'step3') {
    // Предотвращаем переход, если выполнено условие
    if (!userHasCompletedAction()) {
      alert('Необходимо выполнить действие перед следующим шагом');
      return false;
    }
  }
});

Пропуск шагов и условные переходы

Для создания адаптивного тура можно использовать условные переходы, основанные на состоянии приложения:

intro.onafterchange(function(targetElement) {
  if (targetElement.id === 'step2' && !isFeatureEnabled()) {
    // Пропускаем шаг 2 и идем сразу к шагу 3
    intro.nextStep();
  }
});

Методы nextStep() и previousStep() могут комбинироваться с условными проверками для построения сложных сценариев.

Комбинирование с внешними событиями

Переходы могут инициироваться не только кнопками Intro.js, но и внешними событиями, например, кликами по кнопкам интерфейса:

document.querySelector('#skipStep').addEventListener('click', () => {
  intro.nextStep();
});

Это позволяет интегрировать тур с пользовательским интерфейсом приложения и управлять ходом экскурсии программно.

Советы по оптимизации переходов

  • Для длинных туров рекомендуется использовать goToStep() вместо последовательного вызова nextStep() при необходимости пропуска шагов.
  • События onbeforechange и onafterchange эффективны для проверки условий и динамического изменения текста или целевых элементов подсказок.
  • Анимации переходов должны быть короткими, чтобы не замедлять взаимодействие пользователя с интерфейсом.

Понимание этих инструментов позволяет создавать динамичные, интерактивные и условные туры, полностью контролируя ход переходов между шагами.

Оглавление