CSS 전환 애니메이션이 .appendChild와 작동하지 않습니다.

Question

자바 스크립트 및 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; 

, 게임에서 사용자가 또 다른 사업부로 이동됩니다 이 함수 $("tile"+tile).appendChild($("ava_"+id));

그래서 div를 다른 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);