How to morph multi-part css properties with Mootools Fx?

There are some css properties that can only(as far as I know) be modified as a set of values, like text-shadow (text-shad开发者_如何学运维ow:<xOffset> <yOffset> <radius> <color>;). I've seen some referred to as shorthand values, even though I've never seen the longer syntax version.

So, in a nutshell I'd like to modify individual parts of a declaration like in the example code below in an Fx.Morph transition without resorting to transition-specific hacks:

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

Let's say I need to fade the shadow out. How would I accomplish that?

---

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

then just use like this.tween('text-shadow', '#000 10px 10px 30px'); - but you need to define a base shadow first VIA MOOTOOLS. this seems to work: 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"));
    }
});