virtual-dom-transition

A modified patch for virtual-dom, making it easy to work with CSS transitions and animate elements being inserted or removed.

View example on RequireBin

install

npm install virtual-dom-transition

To use this module you need to replace your virtual-dom patch method with the one provided.

var h = require('virtual-dom/h')
var diff = require('virtual-dom/diff')
var patch = require('virtual-dom-transition/patch') // CSS Transition support

The patch method is almost identical to the original from virtual-dom with minor changes to add CSS transition support.

documentation

Transition support is enabled by adding a transition property to a VNode you want to animate.

The duration specifies the DOM removal delay, which should be the same as your css transition-duration. When an element is inserted to DOM the enter class is added, and removed in the next tick. Similarly the leave class is added when the element is being removed.

var item = h('li.item', { key: ID }, 'List-item')
item.transition = {
    duration: 1000,
    enterClass: 'enter',
    leaveClass: 'leave'
}

These are the default values, for simplicity you may omit the CSS classes:

item.transition = 1000 // duration

Note that when working with items in a list you must provide the key attribute to allow virtual-dom to distinguish and reorder the elements!

CSS

Here is a basic CSS transition for fading elements in and out, based on the default parameters:

li.item .enter, li.item .leave {
    opacity: 0;
}

li.item {
    opacity: 1;
    transition: all 1s ease-in-out;
}

version

The module follows the major and minor version numbering of virtual-dom.

inspiration

This module is inspired by the ReactCSSTransitionGroup of React.