https://github.com/tdumitrescu/snabbdom-delayed-class

Snabbdom class module with support for delayed/on-remove class updates
https://github.com/tdumitrescu/snabbdom-delayed-class

animation css snabbdom

Last synced: 4 days ago
JSON representation

Snabbdom class module with support for delayed/on-remove class updates

• Host: GitHub
• URL: https://github.com/tdumitrescu/snabbdom-delayed-class
• Owner: tdumitrescu
• Created: 2016-12-19T07:36:04.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-19T19:37:57.000Z (almost 8 years ago)
• Last Synced: 2024-09-06T19:13:51.724Z (29 days ago)
• Topics: animation, css, snabbdom
• Language: JavaScript
• Size: 8.79 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# snabbdom-delayed-class

Replacement module for [Snabbdom's core `class` module](https://github.com/snabbdom/snabbdom#the-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](https://github.com/snabbdom/snabbdom#delayed-properties). 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:

```js

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:

```js

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):

```js

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