Latest stable version: 1.2.0
Tiny module to support binding/unbinding transition hooks declaratively.
npm install diffhtml-inline-transitionsdiffHTML allows developers to globally define transitions that can react to changes in the DOM and optionally prevent renders until a returned Promise completes. This is ideal for animations and monitoring when things happen.
You can read more on them here: https://github.com/tbranyen/diffhtml#user-content-add-a-transition-state-callback
What isn't ideal is defining all these transitions globally. It'd be nicer to be able to inline them directly into a tagged template...
This module does just that, and works identical to addTransitionState, except
for two minor differences.
-
First, it adds the element you defined the transition on as the first argument to the transition callback. This way you can track the relationship between where the transition was mounted and any child elements that may trigger it.
-
Second, it sets the transition callback context (the
this) to be the current element being affected, which makes it more useful.
-
Subscribe to attribute changes
const unsubscribe = inlineTransitions(diff);
-
Unsubscribe from attribute changes:
unsubscribe();
Apply to an element by passing the function to the associated state name:
import $ from 'jquery';
import * as diff from 'diffhtml';
import inlineTransitions from 'diffhtml-inline-transitions';
const { innerHTML, html } = diff;
// Enable the monitoring of attributes for changes.
inlineTransitions(diff);
// Use jQuery to return a promise and fade in the body and paragraph.
function fadeIn() {
return $(this).fadeIn('slow').promise();
}
innerHTML(document.body, html`<body attached=${fadeIn}>
<p>Watch me fade in slowly!</p>
</body>`);Copyright © 2016 Tim Branyen (@tbranyen) Licensed under the MIT license.