Css转换动画不能与.appendChild配合使用

Question

我正在用javascript和css等进行游戏。 在某些移动浏览器中，角色动画很慢。现在它正在进行回调。

用户请求平铺，服务器查看平铺是否空闲，服务器发送数据包以移动头像。

所以用户要走到那个图块，服务器发送图块去哪里。

var movecallback = avatars.moved(id); 
movelayer('ava_'+id, ava_x, ava_y, 25, 20, 1, movecallback); 

东西之前与movecallback功能做，但我删除，并利用CSS3转换，因为这是顺畅。

看到这个

$("ava_"+id).style.transform = 'translate3d('+ava_x+'px, '+ava_y+'px,0)'; 
       $("ava_"+id).style.OTransform = 'translate3d('+ava_x+'px, '+ava_y+'px,0)';   // Opera 
       $("ava_"+id).style.msTransform = 'translate3d('+ava_x+'px, '+ava_y+'px,0)';   // IE 9 
       $("ava_"+id).style.MozTransform = 'translate3d('+ava_x+'px, '+ava_y+'px,0)';  // Firefox 
       $("ava_"+id).style.WebkitTransform = 'translate3d('+ava_x+'px, '+ava_y+'px,0)'; 

而且对CSS我有这样的：

-webkit-transition: -webkit-transform 1s ease-in-out; 
transition: -webkit-transform 1s ease-in-out; 

这是在游戏中工作得很好，但不是在游戏中的用户要与另一个DIV此功能$("tile"+tile).appendChild($("ava_"+id));

因此，当您将div附加到另一个时，css转换会被删除？我怎样才能解决这个问题？

Answer 1

我认为这是浏览器优化的一个副作用。 您可以使用很短的超时时间来避免它，例如here。

所以对于你的情况，你可以试试：

$("tile"+tile).appendChild($("ava_"+id)); 
setTimeout(function(){  
    $("ava_"+id).style.transform = 'translate3d('+ava_x+'px, '+ava_y+'px,0)'; 
}, 1);