Vdom Css Preserve Animation Fail

index.js

var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');

const area = [2, 1, 3, 4, 5];

function renderTile(pos) {
  const animation =  area[pos]===1?'.animate':'';

  const attrs = {
    key: area[pos],
    style: {
      left: pos * 50 + 'px'
    }
  };
  
  const className = '.tile' + animation;

  return h('div' + className, attrs);
}

function renderContent() {
  const children = [];
  
  for (var i = 0; i<area.length; i++) {
   children.push(renderTile(i));
  }
  return children;
}

function render() {
	return h('div.wrap', renderContent());
}

function update() {
  const oldP = area.indexOf(1);
  const newP = (oldP + area.length - 1) % area.length;
  area[oldP] = area[newP];
  area[newP] = 1;
}

const element = document.getElementById('area');
var tree = render();
var rootNode = createElement(tree);
element.appendChild(rootNode);

// this updates the state every 500 ms
// change it to 1000ms to see full animation
const updateDuration = 500;

var lastUpdate = Date.now();
function loop() {
  const now = Date.now();
  const rest = 1 - (now - lastUpdate) / updateDuration;
  if (rest <= 0) {
    lastUpdate = now;
    update();
  }
  
  var newTree = render();
  var patches = diff(tree, newTree);  
  rootNode = patch(rootNode, patches);
  tree = newTree;
  requestAnimationFrame(loop);
}

loop();