Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
test
.babelrc
.gitignore
README.md
index.js
package.json
rollup.config.js

README.md

<±/> diffHTML Inline Transitions Middleware

Stable Version: 1.0.0-beta.9

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)
You can’t perform that action at this time.