1

XUIトゥイーンの使い方がわかりません。xui Webサイトでは、次のサンプルコードが提供されています。

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のマスターブランチコードには次のようなものがあります。

// 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>

#boxcssbackground-propertyとpositionが明示的に設定されているためleft、目的の効果と同様の効果を比較的簡単に生成できます。

ページが読み込まれてから0.5秒後、背景色を白から緑に変えながら、からに#box移動するのに2秒かかるはずです。次に、コールバックを使用して、元の位置に戻ります。元の位置に戻るには、さらに2秒かかります。left:500pxleft:100px#boxleft:500px

明らかに、これはあなたの正確な質問に答えるものではありませんが、これに遭遇した人（私のような）にとっては、当面の回避策を提供します。

于 2011-12-02T15:02:49.750 に答える