| 1 | --- |
| 2 | name: direction |
| 3 | description: Navigation direction-based styling |
| 4 | --- |
| 5 | |
| 6 | # Navigation Direction Variants |
| 7 | |
| 8 | Apply different styles based on navigation direction (forward/backward). |
| 9 | |
| 10 | ## CSS Classes |
| 11 | |
| 12 | ```css |
| 13 | /* Delay only when navigating forward */ |
| 14 | .slidev-nav-go-forward .slidev-vclick-target { |
| 15 | transition-delay: 500ms; |
| 16 | } |
| 17 | .slidev-nav-go-backward .slidev-vclick-target { |
| 18 | transition-delay: 0; |
| 19 | } |
| 20 | ``` |
| 21 | |
| 22 | ## UnoCSS Variants |
| 23 | |
| 24 | Use `forward:` or `backward:` prefix: |
| 25 | |
| 26 | ```html |
| 27 | <div v-click class="transition forward:delay-300">Element</div> |
| 28 | ``` |
| 29 | |
| 30 | Animation is only delayed when navigating forward, not when going back. |
| 31 | |
| 32 | ## Use Case |
| 33 | |
| 34 | Create asymmetric animations where entering a slide feels different from leaving it. |
| 35 |