React Virtual Dom Diff重置CSS動畫

Question

我正在用CSS動畫制作游戲。

我對移動動畫有以下css規則：

.animate {
  animation: play-move 1s steps(10) infinite;
}

我每半秒更新一次狀態，因此狀態更改為：

1. 狀態： [0, 1, 0]視圖： <div/><div class="animate"/><div />
2. 狀態： [0, 0, 1]視圖： <div/><div/><div class="animate">

問題是隨着dom的變化，css動畫重置，所以我看不到完整的動畫。

查看反應版本：

http://jsfiddle.net/CGmCe/12998/

但是，如果您反轉移動方向，動畫不會重置。

mithriljs版本： http ： //jsfiddle.net/CGmCe/12982/

jQuery： http : //jsfiddle.net/CGmCe/12968/

Answer 1

您無需更改整個DOM ，只需更改class attr值，如下面的fuddle鏈接。

http://jsfiddle.net/CGmCe/12974/

在渲染時：您可以渲染<div class="tile temp100"></div> 。

在狀態更改時，您可以將類別更改為temp100,temp010,temp001