Setting the file. One moment.
Subchapter 7.16
references/core-animations.mdMarkdown3 KBView on GitHub
<div v-click>Appears on click</div>
<div v-click>Appears on next click</div>Animate list items:
<v-clicks>
- Item 1
- Item 2
- Item 3
</v-clicks>With depth for nested lists:
<v-clicks depth="2">
- Parent 1
- Child 1
- Child 2
- Parent 2
</v-clicks>Relative positioning:
<div v-click>1st (default)</div>
<div v-click="+1">2nd</div>
<div v-click="-1">Same as previous</div>Absolute positioning:
<div v-click="3">Appears on click 3</div>
<div v-click="[2,5]">Visible clicks 2-5</div>Show with previous element:
<div v-click>Main element</div>
<div v-after>Appears with main element</div>Conditional rendering by click:
<v-switch>
<template #1>First state</template>
<template #2>Second state</template>
<template #3>Third state</template>
</v-switch>---
clicks: 10
---Or starting from specific count:
---
clicksStart: 5
---Using @vueuse/motion:
<div
v-motion
:initial="{ x: -100, opacity: 0 }"
:enter="{ x: 0, opacity: 1 }"
>
Animated content
</div>Click-based motion:
<div
v-motion
:initial="{ scale: 1 }"
:click-1="{ scale: 1.5 }"
:click-2="{ scale: 1 }"
>
Scales on clicks
</div>In headmatter (all slides):
---
transition: slide-left
---Per-slide:
---
transition: fade
---fade / fade-outslide-left / slide-rightslide-up / slide-downview-transition (View Transitions API)Different transitions for forward/backward:
---
transition: slide-left | slide-right
---Define CSS classes:
.my-transition-enter-active,
.my-transition-leave-active {
transition: all 0.5s ease;
}
.my-transition-enter-from,
.my-transition-leave-to {
opacity: 0;
transform: translateX(100px);
}Use: transition: my-transition
Animation targets get these classes:
.slidev-vclick-target - Animated element.slidev-vclick-hidden - Hidden state.slidev-vclick-current - Current click target.slidev-vclick-prior - Previously shown.slidev-vclick-target {
transition: opacity 100ms ease;
}
.slidev-vclick-hidden {
opacity: 0;
pointer-events: none;
}