Play animation when v-click

[FlorianWoelki]

Hey,

I want to execute a motion animation whenever I click, using a v-click component or directive.

<div v-click>
  <p v-motion ...>Test</p>
</div>

Is that possible?
Thank you!

[antfu]

Currently, you can do it this way:

---
preload: false
clicks: 3
---

<p v-if="$slidev.nav.clicks === 1" v-motion>Test</p>

[FlorianWoelki]

Thanks that worked!

[dvasiliu]

Would this work with multiple clicks on the same page, such as:

---

preload: false
clicks: 3

Test1

Test2

[PGimenez]

I'm also onion knowing if this is still the best way to achieve animations onv-click

[kermanx]

I'm also onion knowing if this is still the best way to achieve animations onv-click

For most of the use cases, directives like v-click is all you need. (https://sli.dev/guide/animations#click-animations)

However, currently there are some problem to use v-click and v-motion together. As a workaround, we can use v-if="$clicks === 2" insteaf of v-click. ($clicks is the shorthand of $slidev.nav.clicks)