1

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

4

2 回答 2

3

因为我讨厌找到关于 SO 问题的非答案，所以我想我会参与其中。

由于错误报告中的信息（ 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();

完美运行。祝你好运！

于 2010-12-23T18:52:30.460 回答
1

YUI3 并没有正式支持这一点，但是您可以通过订阅补间事件并自己修改值来做一些非常相似的事情。

于 2010-01-13T04:10:08.480 回答