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);