Question

我正在使用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>

Answer 1

一旦正方形旋转180度，每次迭代都将其设置为180度，这是它的当前旋转值而不是动画。增加对x轴的处理方式将每次迭代旋转。 IE rotateX: '+=180'

http://jsfiddle.net/75p76esy/1/

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

转换Js动画循环不能正常工作

1 个答案: