遷移方向に基づくスタイル

遷移するときに、進めるか戻るかで異なるクラスを適用したいときがあるかもしれません。.slidev-nav-go-forward または .slidev-nav-go-backward クラスを使うと、ナビゲーション時にスライドコンテナに適用され、異なるスタイルやアニメーションを適用できます:

/* 例: 進めるときにのみ transition-delay を適用し、戻るときには適用しない */
.slidev-nav-go-forward .slidev-vclick-target {
  transition-delay: 500ms;
}
.slidev-nav-go-backward .slidev-vclick-target {
  transition-delay: 0;
}

より簡単に適用できるように、いくつかの UnoCSS バリアント も提供しています。forward: または backward: プレフィックスを任意の UnoCSS クラスに追加することで、特定の遷移方向でのみスタイルを有効にできます:

<div v-click class="transition delay-300">要素</div>
<div v-click class="transition forward:delay-300">要素</div>

上記の例では、アニメーションは進む方向に遷移するときにのみ delay-300 が適用されます。