Package Exports

shared-transition

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (shared-transition) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

shared-transition

Transition between DOM elements. Demo

script tag

<script src="https://unpkg.com/shared-transition@0.0.1/dist/shared-transition.umd.js"></script>

npm

npm install shared-transition

yarn add shared-transition

Usage

let transition = new SharedTransition(from, to);
await transition
  .delay(delay)
  .easing(easing)
  .duration(duration)
  .play();

await transition.reverse();

The play and reverse function returns a promise which resolves when the transition is done.

Note:

if you use the below CSS approach to center fixed DOM elements horizontally.

selector {
  left: 50%;
  position: fixed;
  transform: translate3d(-50%, 0, 0);
}

The transition would not work properly, check here for more details on the issue.

Shared-Transition comes with a center method for centering fixed elements in the DOM horizontally. Use that instead.

Any translate value applied on any of the target elements parent before the transition plays would cause a distortion in the transition.

example

SharedTransition.center(element);