React虚拟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动画会重置，所以我看不到完整的动画。

见react版本：

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/

on render:您可以呈现<div class="tile temp100"></div>。

在状态更改时，可以将类更改为temp100,temp010,temp001序列