javascript - 当在 CSS 中专门设置颜色时，Mootools 补间颜色过渡被元素子元素拒绝

Question

为了您的测试乐趣:http://jsfiddle.net/EnJSM/

请注意，如果“颜色:#6CB5FF；”将被删除，转换将正常工作，而不是仅适用于该行的第二部分。

我很好奇最终的解决方案是怎样的。

Answer 1

是的 - tween 是单个属性，它没有重载 - 尽管它应该接受单个参数(当前的目标值)或数组 [value1, value2] - 所以你的代码没有错。

您可以尝试改用变形:

$("element").addEvent("click", function() {
    this.morph({
        color: ["#A00000", "#99CCFF"]
    });
});

话虽如此，tween 在这里似乎也能正常工作。当你说 it's rejected, 你是什么意思？什么都没发生？你有异常(exception)吗？在什么浏览器中？哪个mootools？你有 !important 在 css 中吗？问题太宽泛，无法按原样回答。

如果你想让两个 els 都改变颜色，使用这个:

$("element").set("tween", {
    onStart: function() {
        this.element.addClass("tweening");
    },
    onComplete: function() {
        this.element.removeClass("tweening");
    }


}).addEvent("click", function() {
    $("element").tween('color', ["#A00000", "#99CCFF"]);
});

在哪里

#element.tweening strong {
    color: inherit;
}

这将在您设置动画时暂时禁用样式。