CSS过渡动画不适用于.appendChild [英] Css transition animation not working with .appendChild

问题描述

我正在用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)';//歌剧$("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缓入；转换:-webkit-transform 1s缓入； 

这很好，但在游戏中效果不佳，在游戏中，用户将使用此功能

$("tile" + tile).appendChild($("ava _" + id));

因此，当您将div附加到另一个时，css过渡会被删除吗?我该如何解决?

解决方案

我认为这是浏览器优化的副作用.您可以使用非常短的超时来避免这种情况，例如此处.

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

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

I'm making a game with javascript and css and so on. Animation of character is slow in some mobile browsers. Now it is working with a callback.

User request tile, server looks if tile is free, server send packet to move avatar.

so user is going to walk to that tile, server sends tile where to go .

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

before something was done with movecallback function but I remove that and make use CSS3 transform because that is smoother.

see this

$("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)';

And on css I have this:

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

this is working very well, but not in the game, in the game the user is going to another div with this function $("tile"+tile).appendChild($("ava_"+id));

so the css transition is removed when you append div to another? How can I fix this?

解决方案

I think this is a side effect of a browser optimization. You can use a very short timeout to avoid it, like here.

So for your case, try something like:

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

这篇关于CSS过渡动画不适用于.appendChild的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！