Router Transitions

@ribajs/router supports declarative transitions with rule-based selection.

For nested demos inside this documentation, links are routed with rv-route and an explicit viewId so navigation stays inside the embedded router-view instead of the global docs view.

Syntax

routerModule.init({
  transitions: [
    {
      name: "default",
      leave: ({ current }) => animateOut(current.container),
      enter: ({ next }) => animateIn(next.container),
    },
  ],
});

Rules

Transitions can use from and/or to:

{
  name: "home-to-detail",
  from: { namespace: "home" },
  to: { namespace: "detail" },
  leave: ({ current }) => animateOut(current.container),
  enter: ({ next }) => animateIn(next.container),
}

Condition keys

• namespace: string | string[]
• route: string | string[]
• custom: (data) => boolean

Resolution priority

1. Explicit priority value (highest first)
2. Rule specificity (from+to > to > from)
3. Condition specificity (custom > route > namespace)
4. Declaration order

Sync mode

Enable with sync: true when leave and enter should run together:

{
  sync: true,
  leave: ({ current }) => fadeOut(current.container),
  enter: ({ next }) => fadeIn(next.container),
}

Once transitions

Run code only on first load:

{
  name: "home-once",
  to: { namespace: "home" },
  once: ({ next }) => introReveal(next.container),
}

Compatibility wrappers

Class-based transitions still work and can be wrapped:

import { FadeTransition } from "@ribajs/router";

routerModule.init({
  transitions: [FadeTransition.asDefinition()],
});

Creative examples

Slide transition demo

Credits:

• Inspired by Thierry Michel's Barba.js example: https://codepen.io/thierrymichel/project/editor/XkkWWv