css3动画animation第二次失效问题

做跳跳游戏的时候发现chess从A->B修改left,top并用animation做效果,第一次都能成功,第二次会失败。看代码以后,发现animation的forwards属性虽然效果上是跳到B点,但chessdom的left,top属性还停留在原始。解决方案:
chessdom.style.animation = jump ${time/100}s cubic-bezier(0.25,0.1,0.25,1) forwards;
//forwards修改了,但是dom的值没有变过来,这里一定要变过来。
chessdom.style.left=chess.x+'px'
chessdom.style.bottom=chess.y+'px'
//动画执行完毕以后,把动画效果置空
setTimeout(function(){
chessdom.style.animation=''“},
time/100*10)

你可能感兴趣的:(css3动画animation第二次失效问题)