在YUI3中同步动画？

Question

在yui3中，是否可以同步多个动画，以便它们一起进行？类似于jQuery1.4路线图中提到的内容，并在本例http://ejohn.org/files/sync中演示。

Answer 1

YUI3并不正式支持它，但你可以通过订阅补间事件并自己修改值来做一些非常类似的事情。

Answer 2

因为我讨厌在SO上找到问题的非答案，所以我想我应该加入进来。

多亏了bug报告(http://yuilibrary.com/projects/yui3/ticket/2528886)中的信息，我弄明白了这一点。

这是我的东西:两个盒子，并排在一起。我想让左边的盒子缩小(宽度)，同时让右边的盒子变大。

(我使用div，使用float:left/float right和overflow:hidden，这是由于我不久前做出的一些不幸的决定，但这应该适用于大多数其他配置。)

下面是我所做的：

var anim = new Y.Anim({
        duration: 1.0
});

var elmLeftBox = Y.one('#leftBox');
var elmRightBox = Y.one('#rightBox');

var intWidth = parseInt(elmLeftBox.getComputedStyle('width'), 10);

anim.on('tween', function(e) {
    var elapsedTime = this.get('elapsedTime');
    var duration = this.get('duration');
    var easing = this.get('easing');

    var leftPos = easing(elapsedTime, intWidth, (-1 * intWidth), duration*1000);
    var rightPos = easing(elapsedTime, 0, intWidth, duration*1000);
    elmLeftBox.setStyle('width', leftPos);
    elmRightBox.setStyle('width', rightPos);
});

anim.on('end', function(evt) {
    //clean up after myself - don't want hardcoded widths
    elmLeftBox.setStyle('width', 0);
    elmRightBox.setStyle('width', '100%');
});

anim.run();

效果很好。祝好运!