2

我正在用 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 转换会被删除？我怎样才能解决这个问题？

4

1 回答 1

2

我认为这是浏览器优化的副作用。您可以使用非常短的超时来避免它，就像这里一样。

因此，对于您的情况，请尝试以下操作：

$("tile"+tile).appendChild($("ava_"+id));
setTimeout(function(){       
   $("ava_"+id).style.transform = 'translate3d('+ava_x+'px, '+ava_y+'px,0)';
}, 1);
于 2014-04-25T14:22:20.317 回答