如何使用XUI補間？

我不明白如何使用XUI補間。在xui網站上，他們給出以下示例代碼：如何使用XUI補間？

x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);

這是應該做什麼的？我創建了一個<div id="box"></div>，運行上面的js代碼行，但沒有發生任何事情。這是我的完整代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script type="text/javascript" src="xui.min.js"></script> 
    <script type="text/javascript"> 
    x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]); 
    </script> 

</head> 
<body> 

<div id="box"></div> 
</body> 
</html>

什麼也沒有發生......

來源

2011-11-07 John

所以，XUI的吐溫似乎是在過程中的工作。事實上，在master branch code on GitHub你會發現：

// queued animations 
/* wtf is this? 
    if (props instanceof Array) { 
    // animate each passing the next to the last callback to enqueue 
     props.forEach(function(a){  
     }); 
     } 
*/

因此，簡而言之，基於陣列的補間動畫屬性出現在時刻搗毀。另外，在處理當前未在DOM元素上設置的屬性時，XUI的tween似乎有點不自然。（例如，一個透明元件上設置background-color使它轉動黑色...而不是預期的顏色。）

也就是說，先前設置的屬性的單一tween和callback工作良好。那麼來看看下面的（和原諒內嵌CSS）：

<html> 
    <head> 
    <script type="text/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script> 

    <script type="text/javascript"> 
    x$.ready(function(){ 
     setTimeout(function(){ 
       x$('#box').tween({'left':'100px', 'background-color':'#339900', duration:2000}, function(){ 
       x$('#box').tween({'left':'500px', duration:2000}); 
      }); 
     }, 500); 
    }); 
    </script> 
</head> 
<body style="position:relative;"> 
    <div id="box" style="position:absolute;top:50px;left:500px;width:100px;height:100px;background-color:#fff;border:1px solid #000;">the box</div> 
</body> 
</html>

因爲#box現在有一個CSS background-property和left位置明確設置，它是比較容易產生類似一個期望的效果。

頁面加載後半秒鐘，#box應該花費2秒從left:500px移動到left:100px，同時將背景顏色從白色變爲綠色。然後，使用回調，#box回到原來的位置left:500px - 再返回2秒。

顯然，這並不能回答你確切的問題，但對於那些偶然發現的人（像我），它提供了暫時的解決方法。

來源

2011-12-02 15:02:49 kurttheviking

如何使用XUI補間？

回答

相關問題