MooTools Tween en pourcentage

Question

Est-il possible d'interpoler un élément en pourcentage dans MooTools?

var slide = new Fx.Tween($('slide_box')); 
$('next_slide').addEvent('click',function(){ 
    slide.start('left', '-100%'); 
}); 

Mais ce code tween un élément par 100px, pas en pourcentage.

Answer 1

Peut-être que je néglige quelque chose d'évident, mais est -100% pas simplement "0px"?

Si un élément a une position de gauche absolue de 600px dans un DIV positionné de manière relative, le déplacement de cet élément -100% à gauche donnera une position de 0,0 (en supposant que les éléments supérieurs sont 0).

Vous pouvez donc réaliser ceci avec un morph.

$('slide_box').morph({'left':'0px'}); 

Si vous vouliez changer l'élément d'une valeur autre que 100%, vous pouvez utiliser un calcul simple pour connaître le montant de décalage requis.

var shiftPercentage = 70; 
var elementPosition = $('slide_box').getPosition().x; 
var resultingShiftAmount = (elementPosition/100)*shiftPercentage; 
$('slide_box').morph({'left':resultingShiftAmount+'px'}); 

Bien sûr, en fonction de si vous voulez la déplacer dans le sens positif ou négatif, faire la variable « resultingShiftAmount » positive ou négative.

Espérons que cela aide.

Une autre édition, il semble que la classe Tween a une option appelée «unité». J'imagine que cela ne marchera pas comme prévu.

var slide = new Fx.Tween($('slide_box'),{unit:'%'}); 
slide.start('left','-100%'); 

L'extrait ci-dessus code transformera l'élément « slide_box » la position de -100% par rapport à son élément contenant (au moins dans mes brèves essais cela semble être le cas). Par exemple - l'élément contenant est assis à 0px, 0px a sa position à relative. Dans cet élément, il y a un élément absolument positionné à 500px, 0px. Comme je peux le voir, si vous deviez utiliser le code ci-dessus sur cet élément absolument positionné, il serait positionné absolument à partir de 0,0 de l'élément contenant, moins 100% de la largeur des éléments contenant.

Cela me semble un peu confus, mais c'est ce que les tests ont montré.

Bonne chance!

Answer 2

Jetez un oeil à la base Fx classe, il existe une option pour régler l'unité. Votre exemple peut être réécrite à:

$('next_slide').addEvent('click', function(){ 
    new Fx.Tween('slide_box', { 
     unit: '%' 
    }).start('left', -100); 
}); 

Vous pouvez le voir en action here.