On this page ▾
Clicks and transitions
Clicks
Clicks reveal things one step at a time. Add slide-ng-click to any HTML element:
<div slide-ng-click>Shows on the next click</div>
<div slide-ng-click="3">Shows at click 3</div>
<div slide-ng-click="+2">Shows two clicks after the previous element</div>
<div [slide-ng-click]="[2, 4]">Shows from click 2 until click 4, then hides</div>
<div slide-ng-after>Shows together with the element before it</div>
<div slide-ng-click="2" slide-ng-click-hide>Visible first, hides at click 2</div>There are two forms because of how Angular reads attributes. slide-ng-click="3" and slide-ng-click="+2" are plain text, and slide.ng turns them into a number or a relative step. [slide-ng-click]="[2, 4]" is an Angular binding, for ranges and for any value you compute.
To reveal list items one by one, wrap the list in <slide-ng-clicks>. Leave an empty line after the opening tag and before the closing one, otherwise markdown does not turn the list into HTML.
<slide-ng-clicks>
- first
- second
</slide-ng-clicks>Options: depth="2" includes nested lists, every="2" shows two items per click, at="3" sets the first click, hide makes the items hide instead of show.
<slide-ng-switch> shows one child per click, and <slide-ng-click-gap size="2" /> leaves two clicks empty. See Directives and Components.
The URL carries the state: /7?clicks=2 is slide 7 at click 2.
Transitions
Set a transition in a slide's frontmatter. It is used between that slide and the next one, in both directions:
---
transition: slide-left
---| Name | Notes |
|---|---|
slide-left, slide-right, slide-up, slide-down |
Go the other way when you move backwards. |
fade, fade-out |
|
view-transition |
Uses the browser's View Transitions API. There is no animation in browsers without it. |
transition: slide-left | slide-right gives the forward and the backward variant yourself. Set transition in the headmatter for the whole deck. The default is no transition.
The duration is the CSS variable --slidev-transition-duration (0.5s). While a transition runs, the class slidev-nav-go-forward or slidev-nav-go-backward is on the stage, so the UnoCSS variants forward: and backward: work. See Direction variants.
Custom transitions given as an object are not supported, only the named ones.
More
Marks draw hand-made marks on a click, and Motion moves an element between states.