@saekitominaga/customelements-portal
TypeScript icon, indicating that this package has built-in type declarations

2.4.1 • Public • Published

Animated motion <portal> by Custom Elements

npm version Build Status Coverage Status

Add animated motion to the <portal> element by Custom Elements.

Demo

Examples

<x-portal-animation
  src="foo.html"
  referrerpolicy="origin">
</x-portal-animation>

Attributes

src [optional]
URL of a page to be displayed. (Same as src attribute of <portal> Element)
referrerpolicy [optional]
Referrer Policy. (Same as referrerpolicy attribute of <portal> Element)

e.g. <x-portal-animation src="https://example.com/" referrerpolicy="same-origin"></x-portal-animation>

Style customization (CSS custom properties)

name deault Description
--portal-width 640px Width of portal
--portal-height 360px Height of portal
--portal-max-width 100% Maximum width of portal
--portal-max-height 100vh Maximum height of portal
--portal-border-style solid Border style of portal (border-style property)
--portal-border-width 1px Border width of portal (border-width property)
--portal-border-color currentColor Border color of portal (border-color property)
--portal-scale 0.5 Amount of scaling of portal (The value of the scale() in the transform property)
--portal-animation-duration 0.5s Time a transition animation (transition-duration property)
--portal-outline-style solid Outline style of portal (outline-style property)
--portal-outline-width 1px Outline width of portal (outline-width property)
--portal-outline-color currentColor Outline color of portal (outline-color property)
--portal-outline-offset 0px Outline offset of portal (outline-offset property)
  • * Specify a value greater than 0, because setting --portal-animation-duration to '0s' disables the detection of 'transitionend' events.
  • * CSS custom properties names have changed in the version 2.0.0 update. (Not compatible with version 1 series)

Precautions for use

As of October 2022, there is no officially supported browser for the <portal> element (Can I use...). Chrome is supported with chrome://flags/#enable-portals enabled.

Install

npm i @saekitominaga/customelements-portal

DownloadsWeekly Downloads

35

Version

2.4.1

License

MIT

Unpacked Size

49.1 kB

Total Files

8

Last publish

Collaborators

  • saekitominaga