Css transition animation not working with .appendChild

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/23294895/css-transition-animation-not-working-with-appendchild

标签

css

transform

translate3d