YUI 动画在活动结束后？

Question

有没有办法在动画完成后触发事件？ 这样做的理由是什么？ 我对 YUI 库非常陌生，我迷路了..

我现在的情况是

    var anim = new Y.Anim({
        node: node,
        duration: 1.0,
        easing: Y.Easing.easeOut
    });

……等等

注意：这适用于 YUI2。

Answer 1

是的！类似于：

var myAnim = new YAHOO.util.Anim("yourId", {
   left: {from: 0, to:75}
}, 1);

myAnim.onComplete.subscribe(function() {
   alert('Done!');
});

请参阅 http://developer.yahoo.com/yui/examples/animation /index.html 了解更多示例。

Answer 2

要在动画完成后执行某些操作，您只需监听“end”事件：

var anim = new Y.Anim({
    node: node,
    duration: 1.0,
    easing: Y.Easing.easeOut,
    on: {
        end: function (e) {
            // your stuff here
        }
    }
});

Answer 3

这个想法是，由于动画需要时间，因此您可能希望在动画完成时收到通知，以执行您可能需要的任何其他逻辑： 以下是该事件的一些用途：

1. 动画完成后触发其他动画。这可以位于 UI 的同一元素或完全不同的部分。
2. 从 DOM 中删除该元素。也许它是一个弹出窗口，一旦关闭（使用动画），DOM 中就不再需要
3. 其他东西，例如用内容填充元素等。