Interface Config

A map between a selector and a generated view-transition-name.

Both the selector and the name are string templates that use to the navigation's route parameters as a context, as shown in the first example.

As per the second example, attribute names from the selector chain can also be used as parameters to generate the view-transition-name.

In addition, if a view-transition-name contains a class, the appropriate style is applied to the captured element, as demonstrated in the last example.

Example

const config = {
    routes: {
        page: "/page/:page",
        details: "/item/:item_id"
     },
     captures: {
         "nav.$(page)": "page-nav-link",
         "ul li.item#$(item_id) div": "thing"
     }
}
Copy

Example

const config = {
    captures: {
         // For example, with the following DOM:
         // <main><section name="faq"><div class="hero"></section></main>
         // The `div` would receive a `view-transition-name` of `part-faq`.
         "main section[:name] .hero": "part-$(name)"
    }
}
Copy

A map of route name to a pattern, which is in the format of a URL pattern. The names defined here are looked up by the config's rules. When a particular view transition is started as a result of navigation, the route names as applied as the temporary classses on the root (HTML) element, e.g. vt-route-a, vt-route-b, vt-from-a, vt-to-b.

Example

config = {routes: {"details": "/app/item/:item_id"}, ...}
Copy

An array of rules that match a navigation and apply temporary classes and params based pn that rule. The last matching rule would take affect.

A map of selectors to partial style declarations. When a generated name in a capture contains a .{class}, it would match styles from the styles map with that class. In the following example, all boxes matching (".box[id]") would receive a 1 second animation duration, and would have their view-transition-name generated based on the ID.

Example

{
     *      captures: {".box[:id]": "box-$(id).any-box"}
     *      styles: {"::view-transition-group(.any-box)": {animationDuration: "1s"}},
     *   }
Copy