animations synchronisées dans YUI3?

Question

Est-il possible dans yui3 de synchroniser plusieurs animations pour qu'elles progressent ensemble? Quelque chose de similaire à ce qui est mentionné dans la feuille de route jquery 1.4 et démontré dans cet exemple http://ejohn.org/files/sync.

Answer 1

YUI3 ne le supporte pas officiellement, mais vous pourriez faire quelque chose de très similaire en vous abonnant à l'événement tween et en modifiant les valeurs vous-même.

Answer 2

Depuis que je déteste trouver non-réponses aux questions sur, je pensais que je serais la hauteur dans.

Je compris cela, grâce aux informations dans un rapport de bogue (http://yuilibrary.com/projects/yui3/ticket/2528886)

Voici ce que J'ai eu: deux boîtes, côte à côte. Je voulais que la boîte de gauche rétrécisse (en largeur) et en même temps la bonne boîte pour grandir.

(j'utilise divs, avec flotteur: gauche/flotteur droit et trop-plein. Caché, en raison de certaines décisions malheureuses que j'ai fait il y a quelque temps, mais cela devrait fonctionner pour la plupart des autres configurations)

Voici ce que je l'ai fait :

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

Fonctionne parfaitement. Bonne chance!