синхронизированные анимации в YUI3? - PullRequest
Новая
       15

синхронизированные анимации в YUI3?

1 голос
/ 13 января 2010

Возможно ли в yui3 синхронизировать несколько анимаций, чтобы они развивались вместе?Нечто подобное тому, что упомянуто в дорожной карте jquery 1.4 и продемонстрировано в этом примере http://ejohn.org/files/sync.

Ответы [ 2 ]

3 голосов
/ 23 декабря 2010

Так как я ненавижу находить не ответы на вопросы по 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();

Работает отлично. Удачи!

1 голос
/ 13 января 2010

YUI3 официально не поддерживает это, но вы можете сделать что-то похожее, подписавшись на событие анимации и изменив значения самостоятельно.

...