javascript - Animations in Maquette.js -

i've been looking further using maquette.js virtual dom library.
looking @ website library has functionality support animations when adding, removing, , updating dom nodes.
cannot find docs or api on do achieve this.

to make more concrete have made small sample below , 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 example, clicking button open popup.
popup animate fade-in when node added dom , fade-out when node removed dom.

the documentation how animations work still in progress.

there 2 ways animation.

velocity.js

the easiest way use library velocity.js. work need to:

1. add velocity.js script page
2. change h("div#popup") h("div#popup", {enteranimation: fadein})
3. add following javascript function

code:

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

you can view result here.

css transitions

you can use css transitions. work same angularjs , react. need following:

1. include css-transitions.min.js script in page. script provided maquette.
2. change h("div#popup") h("div#popup", {enteranimation: "fadein"})
3. change createprojector call maquette.createprojector(document.body, rendermaquette, {transitions: csstransitions});
4. add following style declarations 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 result here