В Flex 4, как создать переход для стилизованного свойства?

Question

Я пытаюсь создать скин для Flex 4 Spark Button. Он имеет фоновый прямоугольник, цвет которого контролируется свойством стиля "chromeColor". Если я создаю для него декларацию стиля, которая имеет разное значение цвета для состояний "вверх" и "над", она работает нормально - цвет фона кнопки меняется, когда мышь наведена.

Однако я хотел бы изменить это поведение так, чтобы цвет фона изменялся с переходом, а не сразу, при этом все еще имея возможность определять цвета, которые нужно изменить с и на псевдоселекторы CSS. Поэтому я добавил объявление в определение скина, но оно не работает должным образом.

Это ведет себя так:

• при переворачивании цвет меняется сразу,
• если мышь выкатывается до того, как закончится переход при наведении (что на самом деле не произошло) (то есть до того, как пройдет время, установленное в определении анимации), переход сработает, и цвет превратится в оригинал, "вверх" значение
• если мышь выкатится после этого времени, изменение цвета происходит мгновенно

Вот соответствующие фрагменты кода:

Main.mxml:

<fx:Style>

    .blackSquare {
        skinClass: ClassReference("OverButtonSkin");
        chromeColor: #000000;
    }

    .blackSquare:over {
        chromeColor: #ABCDEF; 
    }

</fx:Style>
<s:Button styleName="blackSquare" />

OverButtonSkin.mxml:

<s:transitions>
    <s:Transition>
        <s:AnimateColor target="{bgFill}" duration="1000" />
    </s:Transition>
</s:transitions>

<s:Rect width="100%" height="100%">
    <s:fill>
        <mx:SolidColor id="bgFill" color="{getStyle('chromeColor')}"/>
    </s:fill>
</s:Rect>

Я делаю что-то не так, или я нашел ошибку? Я использую Flex SDK 4.6.0.

Answer 1

Я не думаю, что псевдоселекторы для состояний являются допустимым Flex CSS (который является только подмножеством стандартного CSS). Что вы можете сделать, это создать свои собственные свойства CSS, например:

s|Button {
    chromeColorUp: red;
    chromeColorOver: green;
    chromeColorDown: blue;
}

Теперь для достижения желаемого эффекта вы можете использовать назначение свойств на основе состояния Flex 4.

<s:Rect left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:SolidColor id="bgFill"
                      color.up="{getStyle('chromeColorUp')}"
                      color.over="{getStyle('chromeColorOver')}"
                      color.down="{getStyle('chromeColorDown')}" />
    </s:fill>
</s:Rect>

Transition Вы уже определили, теперь будет автоматически воспроизводить цветовой переход между красным, зеленым и синим, когда кнопка меняет свое состояние.