Comment morphiser les propriétés css multi-parties avec Mootools Fx?

Question

Il existe des propriétés CSS qui peuvent seulement (pour autant que je sache) être modifiées comme un ensemble de valeurs, comme text-shadow (text-shadow:<xOffset> <yOffset> <radius> <color>;). J'en ai vu certains se référer à des valeurs abrégées, même si je n'ai jamais vu la version plus longue de la syntaxe. Alors

, en quelques mots, je voudrais modifier des pièces individuelles d'une déclaration comme dans l'exemple de code ci-dessous dans une transition Fx.Morph sans recourir à des hacks spécifiques de transition:

text-shadow:1px 1px 2px rgba(0,0,0,0.5) 

Disons que je besoin de fondre l'ombre. Comment pourrais-je accomplir cela?

Answer 1

Element.Styles.textShadow = "rgb(@, @, @) @px @px @px";

alors il suffit d'utiliser comme this.tween('text-shadow', '#000 10px 10px 30px'); - mais vous devez définir une ombre de base première VIA MooTools. cela semble fonctionner: http://jsfiddle.net/dimitar/6UADQ/10/

Element.Styles.textShadow = "@px @px @px rgb(@, @, @)"; 

document.id("moo").set("tween", { 
    duration: 600, 
    link: "cancel" 
}).setStyle("text-shadow", "5px 5px 5px #000").addEvents({ 
    mouseenter: function() { 
     this.store("shadow", this.getStyle("text-shadow")); 
     this.tween('text-shadow', '10px 10px 30px rgb(0,0,0) '); 
    }, 
    mouseleave: function() { 
     this.tween('text-shadow', this.retrieve("shadow")); 
    } 
});