Анимация

Анимация по клику

`v-click`

Чтобы применить «анимацию по клику» для элементов, вы можете использовать директиву v-click или <v-click> компоненты

# Привет

<!-- Использование компонента: этот блок не будет видно, пока вы не нажмёте "Далее" -->
<v-click>

Привет, мир!

</v-click>

<!-- Использование директивы: этот блок не будет видно, пока вы не нажмёте "Далее" второй раз -->
<div v-click class="text-xl p-2">

Хэй!

</div>

`v-after`

Использование v-after очень похоже на v-click, но элемент появится только при срабатывании предыдущего v-click.

<div v-click>Привет</div>
<div v-after>Мир</div>

Когда вы нажмёте кнопку «Далее», Привет и Мир появятся вместе.

`v-click-hide`

То же, что и v-click, но вместо того, чтобы отображать элемент, он скроет его после клика.

<div v-click-hide>Привет</div>

`v-clicks`

v-clicks используется только как компонент. Это сокращение для директивы v-click ко всем её дочерним элементам. Особенно полезно при работе со списками.

<v-clicks>

- Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4

</v-clicks>

Каждый пункт будет отображаться по клику на «Далее».

Кастомный счётчик кликов

По умолчанию Slidev подсчитывает, сколько шагов нужно сделать, прежде чем перейти к следующему слайду. Вы можете переопределить этот параметр, передав frontmatter опцию clicks:

---
# 10 кликов на этом слайде, прежде чем перейти к следующему
clicks: 10
---

Порядок

Передав индекс кликов в свои директивы, вы можете настроить порядок раскрытия

<div v-click>1</div>
<div v-click>2</div>
<div v-click>3</div>

<!-- обратный порядок -->
<div v-click="3">1</div>
<div v-click="2">2</div>
<div v-click="1">3</div>

---
clicks: 3
---

<!-- отобразится после 3 кликов -->
<v-clicks at="3">
  <div>Привет</div>
</v-clicks>

Переходы элементов

Когда вы применяете директиву v-click к элементам, она добавляет к ним класс slidev-vclick-target. Когда элементы скрыты, будет добавлен класс slidev-vclick-hidden. Например:

<div class="slidev-vclick-target slidev-vclick-hidden">Текст</div>

После клика он станет

<div class="slidev-vclick-target">Текст</div>

По умолчанию к этим классам применяется мягкий переход прозрачности:

// по умолчанию

.slidev-vclick-target {
  transition: opacity 100ms ease;
}

.slidev-vclick-hidden {
  opacity: 0;
  pointer-events: none;
}

Вы можете переопределить их, чтобы настроить эффекты перехода в своих стилях.

Например, вы можете добавить переход масштабирования следующим образом:

// styles.css

.slidev-vclick-target {
  transition: all 500ms ease;
}

.slidev-vclick-hidden {
  transform: scale(0);
}

Чтобы указать анимацию только для определённого слайда или макета

.slidev-page-7,
.slidev-layout.my-custom-layout {
  .slidev-vclick-target {
    transition: all 500ms ease;
  }

  .slidev-vclick-hidden {
    transform: scale(0);
  }
}

Подробнее в кастомизации стилей.

Перемещение

Slidev имеет встроенный @vueuse/motion. Вы можете использовать директиву v-motion к любым элементам, чтобы применить к ним перемещение. Например

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

Текст Slidev переместится с -80px в исходное положение при инициализации.

Примечание: Slidev предзагружает следующий слайд для повышения производительности, что означает, что анимация может начаться до того, как вы перейдёте на страницу. Чтобы она работала правильно, вы можете отключить предварительную загрузку для конкретного слайда.
---
preload: false
---
Или управляйте жизненным циклом элемента с помощью v-if
<div
  v-if="$slidev.nav.currentPage === 7"
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

Подробнее: Демо | @vueuse/motion | v-motion | Presets

Переходы страниц

Встроенная поддержка слайдов ЕЩЁ НЕ предусмотрена в текущей версии. Мы планируем добавить их в следующей мажорной версии. Но сейчас вы всё ещё можете использовать свои собственные стили и библиотеки для этого.

# Анимация