maquetteでアニメーションさせるには「JSサイド実装」「CSSサイド実装」の二パターンがある

maquetteでアニメーションをさせたい場合、
「JSサイドの実装」と「CSSサイドの実装」のにパターンがあります。

実際のところ

JS実装

公式から例を引用するとVelocity.jsのような外部ライブラリの力を借りつつ、
全部JSでやる方法があるようです

var itemNrs = [1,2,3];
var lastItemNr = 3;

// Animations
var itemEnter = function(domNode, properties) {
  var targetHeight = domNode.scrollHeight;
  domNode.style.height="0px";
  Velocity.animate(domNode, {height: targetHeight, opacity: [1,0]}, 400, "ease-out");
};
var itemExit = function(domNode, removeDomNodeFunction, properties) {
  Velocity.animate(domNode, {height: 0}, 400, "ease-out", removeDomNodeFunction);
};

// Event handlers
var add = function(evt) {
  itemNrs.push(++lastItemNr);
};
var remove = function(evt) {
  itemNrs.pop();
};

projector.append(domNode, function() {
  return h("div", [
    itemNrs.map(function(itemNr) {
      return h("div.demo-block-item", {
        key:itemNr, enterAnimation: itemEnter, exitAnimation: itemExit
      }, [itemNr.toString()]);
    }),
    h("button", {key: 0, onclick: add}, ["+"]),
    h("button", {key: 1, onclick: remove}, ["-"])
  ]);
}, {});

CSS実装

先ほどの例と違ってちゃんとCSS Transitions やっているのがこちら。
つかう場合には別途、maquette提供のcss-transitions.jsを読み出す必要があります。

.slideDown {
  -webkit-transition: 0.5s ease-out height;
  transition: 0.5s ease-out height;
  height: 0;
}

.slideDown.slideDown-active {
  height: 30px;
}

とった風のCSSを用意した上で

var itemNrs = [1,2,3];
var lastItemNr = 3;

// Event handlers
var add = function(evt) {
  itemNrs.push(++lastItemNr);
};
var remove = function(evt) {
  itemNrs.pop();
};

// We need a projector that is configured to do CSS transitions
var projector = maquette.createProjector({transitions: cssTransitions});

projector.append(domNode, function() {
  return h("div", [
    itemNrs.map(function(itemNr) {
      return h("div.demo-block-item", {
        key:itemNr, enterAnimation: "slideDown", exitAnimation: "slideUp"
      }, [itemNr.toString()]);
    }),
    h("button", {key: 0, onclick: add}, ["+"]),
    h("button", {key: 1, onclick: remove}, ["-"])
  ]);
});