Package Exports

diffhtml-middleware-inline-transitions
diffhtml-middleware-inline-transitions/dist/cjs/index.js
diffhtml-middleware-inline-transitions/dist/es/index.js

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

Readme

<±/> diffHTML Inline Transitions Middleware

Stable Version: 1.0.0-beta.29

Tiny module to support binding/unbinding declarative diffHTML transition hooks.

Installation

npm install diffhtml-middleware-inline-transitions

Use

import { use } from 'diffhtml';
import inlineTransitions from 'diffhtml-middleware-inline-transitions';

use(inlineTransitions());

Example

Apply to an element by passing the function to the associated state name:

import $ from 'jquery';
import { innerHTML, html, use } from 'diffhtml';
import inlineTransitions from 'diffhtml-middleware-inline-transitions';

// Enable the monitoring of attributes for changes.
use(inlineTransitions());

// Use jQuery to return a promise and fade in the body and paragraph.
function fadeIn(body, domNode) {
  return $(domNode).fadeOut(0).fadeIn(1000).promise();
}

innerHTML(document.body, html`<body onattached=${fadeIn}>
  <p>Watch me fade in slowly!</p>
</body>`);

Full events and args list:

Event Name	Args
`onattached`	`(eventTarget, domNode)`
`ondetached`	`(eventTarget, domNode)`
`onreplaced`	`(eventTarget, oldNode, newNode)`
`onattributechanged`	`(eventTarget, oldNode, attributeName, oldValue, newValue)`
`ontextchanged`	`(eventTarget, oldNode, oldValue, newValue)`