diffHTML

v1.0.0-beta.28

An easy-to-use Virtual DOM built for the web!


Transitions

A first-class global event system that triggers callbacks whenever nodes, attributes, and text values are added, removed, and replaced in the DOM. All states are described below.

You can use transitions for more than just animations. It can be useful for modifying a DOM node based on some condition when it enters the page, such as backfilling an unavailable/unstable API. You are operating on the actual DOM node when it enters and leaves the page, so you can install and unhook any code.


Promises

You may optionally return a Promise in the transition hook to halt future renders and pause the current operation until it resolves. This is very useful for animating out an element before it is removed from the DOM. This API makes it easy to integrate with Web Animations and Anime.js . This could be used to enable serial or parallel animations.

import { addTransitionState } from 'diffhtml';

// Demonstrates a transition hook that can animate any element
// that is added to the DOM.
addTransitionState('attached', domElement => {
  const frames = [
    { transform: 'translateY(-100%)' },
    { transform: 'translateY(0)' },
  ];

  // `animate` is from Web Animations and `finished` is a Promise
  // which resolves once the animation completes.
  return domElement.animate(frames, { duration: 1000 }).finished;
});


States

The following states are available to hook into through the Virtual DOM operations.

import { addTransitionState } from 'diffhtml';


Attached

This triggers whenever an element gets added into the DOM. Text and comment nodes are not included.

addTransitionState('attached', (element) => {
  console.log(element);
});


Detached

For when an element leaves the DOM.

addTransitionState('detached', (element) => {
  console.log(element);
});


Replaced

Whenever two elements are replaced at render time this is called with the old and new elements.

addTransitionState('replaced', (oldElement, newElement) => {
  console.log(oldElement, newElement);
});


Attribute changed

For when attributes have changed.

addTransitionState('attributeChanged', (element, attrName, oldValue, newValue) => {
  console.log(element, attrName, oldValue, newValue);
});


Text changed

For when text has changed in either TextNodes or SVG text elements.

addTransitionState('textChanged', (element, oldValue, newValue) => {
  console.log(element, oldValue, newValue);
});

Edit on GitHub