Переход цвета анимации Mootools отклонен для дочерних элементов, когда цвет специально установлен в CSS

Question

Для вашего удовольствия от тестирования: http://jsfiddle.net/EnJSM/

Обратите внимание, что если "color: # 6CB5FF;" должен был быть удален, переход работал бы нормально, вместо этого он просто работает для второй части строки.

Мне любопытно, каким будет решение.

Answer 1

да - анимация - это одно свойство, оно не перегружено - хотя оно должно принимать либо один аргумент (целевое значение из текущего), либо массив [значение1, значение2] - поэтому ваш код не ошибается.

вместо этого вы можете попробовать использовать morph:

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

Твин, кажется, тоже отлично работает здесь, сказав это. когда вы говорите it's rejected, что вы имеете в виду? Ничего не произошло? Вы получаете исключение? в каком браузере? какие mootools? у тебя есть !important в css? вопрос слишком широкий, чтобы ответить как есть.

Если вы хотите, чтобы ОБА изменили цвет, используйте это:

$("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;
}

это временно отключит стилизацию во время анимации.