Animations

Click Animations

v-click

To apply "click animations" for elements, you can use the v-click directive or <v-click> components

# Hello

<!-- Component usage: this will be invisible until you press "next" -->
<v-click>

Hello World

</v-click>

<!-- Directive usage: this will be invisible until you press "next" the second time -->
<div v-click class="text-xl p-2">

Hey!

</div>

v-after

The usage of v-after is similar to v-click but it will turn the element visible when the previous v-click is triggered.

<div v-click>Hello</div>
<div v-after>World</div>

When you click the "next" button, both Hello and World will show up together.

v-click-hide

Same as v-click but instead of making the element appear, it makes the element invisible after clicking.

<div v-click-hide>Hello</div>

v-clicks

v-clicks is only provided as a component. It's a shorthand to apply the v-click directive to all its child elements. It is especially useful when working with lists.

<v-clicks>

- Item 1
- Item 2
- Item 3
- Item 4

</v-clicks>

An item will become visible each time you click "next".

Custom Clicks Count

By default, Slidev counts how many steps are needed before going to the next slide. You can override this setting by passing the clicks frontmatter option:

---
# 10 clicks in this slide, before going to the next
clicks: 10
---

Ordering

Passing the click index to your directives, you can customize the order of the revealing

<div v-click>1</div>
<div v-click>2</div>
<div v-click>3</div>
<!-- the order is reversed -->
<div v-click="3">1</div>
<div v-click="2">2</div>
<div v-click="1">3</div>
---
clicks: 3
---

<!-- visible after 3 clicks -->
<v-clicks at="3">
  <div>Hi</div>
</v-clicks>

Element Transitions

When you apply the v-click directive to your elements, it will attach the class name slidev-vclick-target to it. When the elements are hidden, the class name slidev-vclick-hidden will also be attached. For example:

<div class="slidev-vclick-target slidev-vclick-hidden">Text</div>

After a click, it will become

<div class="slidev-vclick-target">Text</div>

By default, a subtle opacity transition is applied to those classes:

// the default

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

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

You can override them to customize the transition effects in your custom stylesheets.

For example, you can achieve the scaling up transitions by:

// styles.css

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

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

To specify animations for only certain slide or layout

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

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

Learn more about customizing styles.

Motion

Slidev has @vueuse/motion built-in. You can use the v-motion directive to any elements to make apply motion on them. For example

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

The text Slidev will move from -80px to its original position on initialization.

Note: Slidev preloads the next slide for performance, which means the animations might start before you navigate to the page. To get it works properly, you can disable the preloading for the particular slide

---
preload: false
---

Or control the element life-cycle with v-if to have fine-grained controls

<div
  v-if="$slidev.nav.currentPage === 7"
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

Learn mode: Demo | @vueuse/motion | v-motion | Presets

Pages Transitions

Built-in support for slides is NOT YET provided in the current version. We are planning to add support for them in the next major version. Before that, you can still use your custom styles and libraries to do that.