React Virtual Dom Diff重置CSS动画

Question

I am building a game, with css animations.

I have this css rule for move animation:

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

I update my state every half second so state changes as:

1. State: [0, 1, 0] View: <div/><div class="animate"/><div />
2. State: [0, 0, 1] View: <div/><div/><div class="animate">

The problem is as the dom changes, the css animation resets, so I can't see the full animation.

see react version:

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

However if you reverse the move direction, animation doesn't reset.

mithriljs version: http://jsfiddle.net/CGmCe/12982/

jquery: http://jsfiddle.net/CGmCe/12968/

Answer 1

instead of updating entire DOM you can just change class attr value as like fuddle link below.

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

on render: you can render <div class="tile temp100"></div> .

on state change you can change the class as sequence as temp100,temp010,temp001