1

我不明白如何使用 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>

什么都没发生...

4

1 回答 1

2

所以，XUI 的补间似乎是一个正在进行的工作。事实上，在GitHub 上的 master 分支代码中你可以找到：

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

因此，简而言之，基于数组的补间属性目前似乎被破坏了。此外，tween在处理当前未在 DOM 元素上设置的属性时，XUI 似乎有点不稳定。（例如，将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现在有明确设置的 cssbackground-property和left位置，所以相对容易产生类似于所需效果的效果。

页面加载半秒后，#box应花 2 秒时间从left:500px到 ，left:100px同时将背景颜色从白色变为绿色。然后，使用回调，#box回到原来的位置left:500px-- 再花 2 秒返回。

显然，这并不能回答您的确切问题，但对于那些偶然发现此问题的人（如我）来说，它暂时提供了一种解决方法。

于 2011-12-02T15:02:49.750 回答