| 1 | --- |
| 2 | relates: |
| 3 | - UnoCSS Variants: https://unocss.dev/config/variants#variants |
| 4 | since: v0.48.0 |
| 5 | tags: [navigation, styling] |
| 6 | description: | |
| 7 | Apply different styles and animations based on the navigation direction. |
| 8 | --- |
| 9 | |
| 10 | # Navigation Direction Variants |
| 11 | |
| 12 | You may want to apply different classes based on whether it's navigating forward or backward. The `.slidev-nav-go-forward` or `.slidev-nav-go-backward` class will be applied to the slide container when navigating, and you can use them to apply different styles or animations: |
| 13 | |
| 14 | ```css |
| 15 | /* example: delay on only forward but not backward */ |
| 16 | .slidev-nav-go-forward .slidev-vclick-target { |
| 17 | transition-delay: 500ms; |
| 18 | } |
| 19 | .slidev-nav-go-backward .slidev-vclick-target { |
| 20 | transition-delay: 0; |
| 21 | } |
| 22 | ``` |
| 23 | |
| 24 | To make it easier, we also provided some [UnoCSS variants](https://github.com/slidevjs/slidev/blob/6adcf2016b8fb0cab65cf150221f1f67a76a2dd8/packages/client/uno.config.ts#L32-L38) for this. You can use the `forward:` or `backward:` prefix to any UnoCSS classes to only enable them in the specific navigation direction: |
| 25 | |
| 26 | ```html |
| 27 | <div v-click class="transition delay-300">Element</div> // [!code --] |
| 28 | <div v-click class="transition forward:delay-300">Element</div> // [!code ++] |
| 29 | ``` |
| 30 | |
| 31 | In the above example, the animation is only delayed when navigating forward. |
| 32 |