当前位置：文江博客话题详情

YUI3 中的同步动画？

发布于 2024-08-17 19:50:57 字数 162 浏览 5 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

弄潮 2024-08-24 19:50:57

因为我讨厌找到关于 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();

完美工作。祝你好运！

Since I hate to find non-answers to questions on SO, I thought I'd pitch in.

I figured this out, thanks to info in a bug report (http://yuilibrary.com/projects/yui3/ticket/2528886)

Here's what I had: two boxes, side by side. I wanted the left box to shrink (width wise) and at the same time the right box to grow.

(I use divs, with float:left/float right and overflow:hidden, due to some unfortunate decisions I made some time ago, but this should work for most other configurations.)

Here's what I did:


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

Works perfectly. Good luck!

回复收藏 0 原文