@matfire/edge-view-transitions
TypeScript icon, indicating that this package has built-in type declarations

0.0.4 • Public • Published

Edge View Transitions

NPM Version GitHub Release

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)

Package Sidebar

Install

npm i @matfire/edge-view-transitions

Weekly Downloads

0

Version

0.0.4

License

MIT

Unpacked Size

3.56 kB

Total Files

5

Last publish

Collaborators

  • matfire