Animations in Maquette.js

Question

I've been looking further into using maquette.js as a virtual DOM library.
Looking at the website the library has functionality to support animations when adding, removing, and updating DOM nodes.
But I cannot find any docs or API on what to do do achieve this.

To make it more concrete I have made a small sample below and here.

var isPopupShown = false;

var togglePopup = function(){
 isPopupShown = !isPopupShown;   
}

var renderMaquette = function () {
  return h("div#container", [
    h("button",  {
      onclick: togglePopup
    }, ["Click me"]),
    isPopupShown ? h("div#popup") : null
  ]);
}

In the example, clicking the button will open the popup.
What I would like is that the popup would animate a fade-in when the node is added to the DOM and a fade-out when the node is removed from the DOM.

Answer 1

The documentation how animations work is still in progress.

There are currently two ways to do the animation.

Velocity.js

The easiest way is to use a library like velocity.js. For this to work you need to:

1. Add the velocity.js script to the page
2. Change h("div#popup") to h("div#popup", {enterAnimation: fadeIn})
3. Add the following javascript function

Code:

var fadeIn = function(element) {
  element.style.opacity = 0;
  Velocity.animate(element, {opacity: 1}, 1500, "ease-out");
};

You can view the result here.

CSS Transitions

You can also use CSS transitions. They work the same as angularJS and react. You need to do the following:

1. Include the css-transitions.min.js script in your page. This script is also provided by maquette.
2. Change h("div#popup") to h("div#popup", {enterAnimation: "fadeIn"})
3. Change the createProjector call to maquette.createProjector(document.body, renderMaquette, {transitions: cssTransitions});
4. Add the following style declarations to the stylesheet:

Stylesheet:

.fadeIn {
  -webkit-transition: 0.5s ease-out opacity;
  transition: 0.5s ease-out opacity;
  opacity: 0;
}
.fadeIn.fadeIn-active {
  opacity: 1;
}

You can view the result here