CSS 过渡动画不适用于 .appendChild

Question

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

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

因此用户将走到该图 block ，服务器将图 block 发送到哪里。

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 附加到另一个 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);