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

Question

There are some css properties that can only(as far as I know) be modified as a set of values, like text-shadow (text-shadow:<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?

Answer 1

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 i suppose. this seems to work: http://jsfiddle.net/6UADQ/