README
snabbdom-delayed-class
Replacement module for Snabbdom's core class
module. It is backwards-compatible with the existing module, but adds functionality for delaying class updates and updating classes before removing elements, similar to the core style
module. These capabilities are useful for constructing animations using CSS classes/stylesheets, instead of inline styles.
Installation/usage
Install package: npm install --save snabbdom-delayed-class
Import/require snabbdom-delayed-class
and pass it to snabbdom.init()
instead of the core class
module:
import snabbdom from 'snabbdom';
import snabbDelayedClass from 'snabbdom-delayed-class';
const patch = snabbdom.init([
snabbDelayedClass,
// other modules
]);
Delayed classes
Classes under delayed
are not changed until the next frame:
h('div', {class: {
fadedout: true,
delayed: {fadedout: false},
}, 'Fading in');
Set classes on remove/destroy
Class changes under remove
are applied when the element is about to be removed from the DOM. The delayRemove
property specifies the number of milliseconds to wait before removing the element (to permit any CSS transitions or animations to finish):
h('div', {class: {
fadedout: false,
remove: {fadedout: true, delayRemove: 300},
}, 'Fading out');
The destroy
property works similarly but has no delayRemove
property; it is assumed that removal delay will be managed by the ancestor node whose removal caused the destroy
call on descendents.
Local development
npm install
npm test
License
MIT