javascript - YUI 中的动画链接

Question

<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，即作为一个链。有什么简单的方法可以做到这一点。??

Answer 1

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 });
    });
  });
});

Answer 2

有一个图库模块可以为您执行此操作：http: //yuilibrary.com/gallery/show/anim-sequence