我正在使用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>
一旦正方形旋转180度，则每次迭代将其设置为180度，这是它的当前旋转值，因此没有动画。.增大x轴的处理方式将使每次迭代旋转。IErotateX: '+=180'
http://jsfiddle.net/75p76esy/1/
$('#square').transition({
perspective: '500px',
x: '+=50',
rotateX: '+=180',
rotateY: '+=180'
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句