JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 734
  • Score
    100M100P100Q92364F
  • License MIT

Seamlessly morph one element into another.

Package Exports

  • illusory

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 (illusory) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

illusory

GitHub build status Open issues npm version downloads license Code style: prettier Top language Status

Seamlessly morph one element into another. Demo

Contents

Installation

<!-- For IE support -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

<script src="https://unpkg.com/illusory"></script>

<script>
  illusory(from, to)
</script>

or 

$ npm install illusory
import { illusory } from 'illusory'

Basic usage

illusory(from, to)

API Details

Note: See the docs page for a friendlier introduction.

illusory(from, to [, options]): Promise

  • from — an Element or an IllusoryElement
  • to — an Element or an IllusoryElement
  • options — Object (see table below)
option type default
includeChildren boolean true
compositeOnly boolean false
duration string 300ms
easing string ease
zIndex number 1
deltaHandlers Object undefined
beforeAttach Function undefined
beforeAnimate Function undefined
beforeDetach Function undefined

IllusoryElement(el [, options])

  • el — Element
  • options — Object (see table below)
option type default
includeChildren boolean true
zIndex number 1
deltaHandlers Object undefined

Properties

  • natural — Element
  • clone — Element
  • rect — DOMRect

Methods

  • setStyle(property: string, value: string)
  • getStyle(property: string): string
  • waitFor(property: string): Promise
  • hide()
  • show()
  • hideNatural()
  • showNatural()
  • flushCSS()
  • detach()

Contributing

Setup

$ git clone https://github.com/justintaddei/illusory
$ cd illusory
$ npm install

Development

Building

$ npm run build

# Watch mode
$ npm run dev

Live-reload server

$ npm run serve

Testing

Tests should be written in the same folder as the file being tested.
Use the [filename].spec.ts naming convention.

Running tests

$ npm test

/docs page

# Transpile ./docs/index.js
$ npm run build:docs

# Watch ./docs/index.js and build on save.
$ npm run dev:docs