css - 如何使用 Mootools Fx 变形多部分 css 属性？

Question

有一些 css 属性只能(据我所知)作为一组值进行修改，例如 text-shadow ( text-shadow:<xOffset> <yOffset> <radius> <color>; )。我见过一些被称为简写值的值，尽管我从未见过更长的语法版本。

因此，简而言之，我想在 Fx.Morph 转换中修改声明的各个部分，例如下面的示例代码，而不求助于特定于转换的 hack:

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

假设我需要淡出阴影。我将如何做到这一点？

Answer 1

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

然后像 this.tween('text-shadow', '#000 10px 10px 30px'); 一样使用 - 但您需要先通过 MOOTOOLS 定义基础阴影。这似乎有效: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"));
    }
});