Edge View Transitions

utilities to handle view transitions when using edge.js

Installation

• Install with your preferred package manager

npm|pnpm|yarn install|add @matfire/edge-view-transitions

Usage

• register the plugin with your edge instance

import edge from "edge.js";
import { edgeViewTransitions } from "@matfire/edge-view-transitions";

edge.use(edgeViewTransitions);

Transition Name

To add a view-transition-name css property to the element, you can add {{transitionName('name_of_the_transition')}} to an element's style property. For instance:

<p style="{{transitionName('para')}}">this is a paragraph</p>

renders to:

<p style="view-transition-name: para;">this is a paragraph</p>

Transition Group

Useful when you need to write styles for view transitions, it will be replaced with the right ::view-transition selector. You can use it like this: {{transitionGroup('name_of_element', 'old|new')}}

These lines:

{{transitionGroup()}}
{{transitionGroup('para')}}
{{transitionGroup('para', 'new')}}

renders to:

::view-transition-old(root)
::view-transition-old(para)
::view-transition-new(para)