Javascript 过渡Js动画循环工作不正常_Javascript_Jquery_Animation_Transition

Javascript 过渡Js动画循环工作不正常

javascript jquery animation

Javascript 过渡Js动画循环工作不正常,javascript,jquery,animation,transition,Javascript,Jquery,Animation,Transition,我正在使用transit.js进行某个实验我正在尝试制作一个正方形，以获得一个无限的动画，在翻转自身时向右移动。但是使用循环，正方形只翻转一次，其余时间它只是向右移动。有什么建议吗 <body> <div id="square" style="width:200px;height:200px;transform: perspective(100px) rotateX(180deg);"> </div> <script src="http://cod

我正在使用transit.js进行某个实验

我正在尝试制作一个正方形，以获得一个无限的动画，在翻转自身时向右移动。
但是使用循环，正方形只翻转一次，其余时间它只是向右移动。有什么建议吗

<body>
<div id="square" style="width:200px;height:200px;transform: perspective(100px) rotateX(180deg);">
</div>

<script src="http://code.jquery.com/jquery-1.9.0b1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0b1.js"></script>
<script src="js/transition.js"></script>
<script>
var animating = false;
transit();
function transit(){
if (!animating)
{
    animating = true;
    $('#square').transition({
          perspective: '500px',
          x: '+=50',
            rotateX: 180,
            rotateY: 180
    },'slow',function (){animating = false; });
     window.setTimeout(function() { transit() }, 1000);
    }
}
</script>


var动画=假；
过境（）；
函数transit（）{
如果（！设置动画）
{
动画=真；
$（'#square'）。转换({
透视图：“500px”，
x:'+=50'，
rotateX:180，
轮换：180
}，'slow'，函数（）{animating=false；}）；
setTimeout（函数（）{transit（）}，1000）；
}
}

一旦正方形旋转180度，每次迭代都将其设置为180度，这是它的当前旋转值，因此没有动画。。以使用x轴的方式递增将在每次迭代中旋转。IE

rotateX:'+=180'

完美的正是我需要的。谢谢！没问题：）很乐意帮忙。

$('#square').transition({
    perspective: '500px',
    x: '+=50',
    rotateX: '+=180',
    rotateY: '+=180'
};