#1810·slidev

Click counter attribute and/or class changes based on clicks

Author: benweidigCreated Aug 10, 2024Updated Aug 22, 2026
Labelsfeat: clicks system🍪 p3-highly-demanded

Is your feature request related to a problem?

I've created a custom HTML graph, as Mermaid.js isn't animatable, and I needed better positional control anyway.

v-click etc. support a lot of possibilities already, but is based around visibility. Sometimes I want to replace elements, and hidden elements are still occupying space. I've added a CSS class that removes an element if hidden, so not a real issue.

However, I got some flickering (depending on the browser used) when things got replaced, so I thought maybe I can do some of the animation/replacement myself with CSS, or just updating a particular element instead of replacing it.

Describe the solution you'd like

Adding the current click count to div.slidev-page or div.slidev-layout to allow more fine-grained selection of HTML elements for custom animation/styling/updates.

To support the same semantics as v-click for showing/hiding, a new component could add/remove classes to an element, so styling, etc. could be active for multiple clicks.

Also, a way to wait for clicks before going to the next page would be nice, although it should be possible with an empty element, too.

Describe alternatives you've considered

A mix of v-click, images, and complex CSS selectors to emulate the behavior.