Question

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

什么都没发生......

Answer 1

所以，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秒钟回来。

显然，这并没有回答你的确切问题，但是对于那些偶然发现这个问题的人（比如我），它提供了暂时的解决方法。

我如何使用XUI补间？

1 个答案: