React Virtual Dom Diff 重置 Css 动画答案

【问题标题】：React Virtual Dom Diff resets Css AnimationReact Virtual Dom Diff 重置 Css 动画
【发布时间】：2015-12-21 12:27:23
【问题描述】：

我正在构建一个带有 css 动画的游戏。

我有这个用于移动动画的 CSS 规则：

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

我每半秒更新一次状态，因此状态更改为：

问题是随着 dom 的变化，css 动画重置，所以我看不到完整的动画。

查看反应版本：

但是，如果您反转移动方向，动画不会重置。

【问题讨论】：

你能做这个吗？
@ParthTrivedi 我做到了。
不，它不播放完整的动画，它只播放一半，我需要动画在它移动的过程中无缝地继续。 @ParthTrivedi。 PS：把updateDuration变量改成1000可以看到完整的动画播放。
你能隐藏/显示你的动画 Div 以避免重置吗？
为什么不使用translate动画，而不是更新div的类属性？

【解决方案1】：

您可以更改 class attr 值，而不是更新整个 DOM，就像下面的 fuddle 链接一样。

渲染时：你可以渲染<div class="tile temp100"></div>。

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

【讨论】：

我必须在特定位置动态添加更多图块？ jsfiddle.net/CGmCe/12977
所以你想要所有的瓦片作为一个不同的人，你只想显示隐藏？而不是作为一个移动的？
好的.. 你希望手的位置在它隐藏时的手位置继续吗？
我想在一个位置添加一个人，然后开始移动它。当他们移动时，我希望它的动画能够无缝地工作。我可以添加多个人，以便他们同时移动。
所以要移动你必须使用position : absolute 和top & left 移动。并且不要一次又一次地重新渲染 dom & 如果你想隐藏使用 css display:none or visibilty:hidden 根据情况。