1 
<div id="demo" class="yui3-module">
<a href="" title="fade out element" class="yui3-remove">Click to animate</a>
</div>
<script src="js/yui-min.js"></script>
<script type="text/javascript">
YUI().use('anim', function(Y) {
var anim = new Y.Anim({
    node: '#demo',
    to: { width: 500, height: 300 }
});
var anim2 = new Y.Anim({
    node: '#demo',
    to: { width: 100, height: 100 }
});

var onClick = function(e) {
    e.preventDefault(); 
    anim.run();
anim2.run(); //how to run anim2 ???
};
Y.one('#demo .yui3-remove').on('click', onClick);
});

anim.run が発生した後に次の anim2 を実行する方法、つまりチェーンとして。これを行う簡単な方法はありますか。??

4

2 に答える 2

3

最初のイベントのイベントをリッスンすることで、別のアニメーションを実行できますend。

anim.on('end', function () {
  anim2.run();
});

を使用すると、これが少し簡単になりますTransition。のインスタンスを作成する代わりに、コールバックAnimを呼び出して使用することができnode.transition()ます。

YUI().use('node', 'transition', function (Y) {
  Y.one('#demo .yui3-remove').on('click', function (e) {
    e.preventDefault();
    Y.one('#demo').transition({ width: 500, height: 300 }, function () {
      this.transition({ width: 100, height: 100 });
    });
  });
});
于 2013-02-23T19:03:04.327 に答える
2

これを行うためのギャラリー モジュールがあります: http://yulibrary.com/gallery/show/anim-sequence

于 2013-02-23T19:59:30.860 に答える