core-animations.md - slidev

core-animations.md

1	---
2	name: animations
3	description: Click animations, motion effects, and slide transitions
4	---
5
6	# Animations
7
8	Click animations, motion effects, and slide transitions.
9
10	## Click Animations
11
12	### v-click Directive
13
14	```md
15	<div v-click>Appears on click</div>
16	<div v-click>Appears on next click</div>
17	```
18
19	### v-clicks Component
20
21	Animate list items:
22
23	```md
24	<v-clicks>
25
26	- Item 1
27	- Item 2
28	- Item 3
29
30	</v-clicks>
31	```
32
33	With depth for nested lists:
34
35	```md
36	<v-clicks depth="2">
37
38	- Parent 1
39	- Child 1
40	- Child 2
41	- Parent 2
42
43	</v-clicks>
44	```
45
46	### Click Positioning
47
48	Relative positioning:
49	```md
50	<div v-click>1st (default)</div>
51	<div v-click="+1">2nd</div>
52	<div v-click="-1">Same as previous</div>
53	```
54
55	Absolute positioning:
56	```md
57	<div v-click="3">Appears on click 3</div>
58	<div v-click="[2,5]">Visible clicks 2-5</div>
59	```
60
61	### v-after
62
63	Show with previous element:
64
65	```md
66	<div v-click>Main element</div>
67	<div v-after>Appears with main element</div>
68	```
69
70	### v-switch
71
72	Conditional rendering by click:
73
74	```md
75	<v-switch>
76	<template #1>First state</template>
77	<template #2>Second state</template>
78	<template #3>Third state</template>
79	</v-switch>
80	```
81
82	## Custom Click Count
83
84	```md
85	---
86	clicks: 10
87	---
88	```
89
90	Or starting from specific count:
91
92	```md
93	---
94	clicksStart: 5
95	---
96	```
97
98	## Motion Animations
99
100	Using @vueuse/motion:
101
102	```md
103	<div
104	v-motion
105	:initial="{ x: -100, opacity: 0 }"
106	:enter="{ x: 0, opacity: 1 }"
107	>
108	Animated content
109	</div>
110	```
111
112	Click-based motion:
113
114	```md
115	<div
116	v-motion
117	:initial="{ scale: 1 }"
118	:click-1="{ scale: 1.5 }"
119	:click-2="{ scale: 1 }"
120	>
121	Scales on clicks
122	</div>
123	```
124
125	## Slide Transitions
126
127	In headmatter (all slides):
128
129	```md
130	---
131	transition: slide-left
132	---
133	```
134
135	Per-slide:
136
137	```md
138	---
139	transition: fade
140	---
141	```
142
143	### Built-in Transitions
144
145	- `fade` / `fade-out`
146	- `slide-left` / `slide-right`
147	- `slide-up` / `slide-down`
148	- `view-transition` (View Transitions API)
149
150	### Directional Transitions
151
152	Different transitions for forward/backward:
153
154	```md
155	---
156	transition: slide-left \| slide-right
157	---
158	```
159
160	### Custom Transitions
161
162	Define CSS classes:
163
164	```css
165	.my-transition-enter-active,
166	.my-transition-leave-active {
167	transition: all 0.5s ease;
168	}
169	.my-transition-enter-from,
170	.my-transition-leave-to {
171	opacity: 0;
172	transform: translateX(100px);
173	}
174	```
175
176	Use: `transition: my-transition`
177
178	## CSS Classes
179
180	Animation targets get these classes:
181	- `.slidev-vclick-target` - Animated element
182	- `.slidev-vclick-hidden` - Hidden state
183	- `.slidev-vclick-current` - Current click target
184	- `.slidev-vclick-prior` - Previously shown
185
186	## Default Animation CSS
187
188	```css
189	.slidev-vclick-target {
190	transition: opacity 100ms ease;
191	}
192	.slidev-vclick-hidden {
193	opacity: 0;
194	pointer-events: none;
195	}
196	```
197

197 lines MARKDOWN