Why is my height changes not taking part in my transition on state change?

Question

I have a transition setup on my Spark component. One of the changes from state 1 to state 2 is the change in height. The value was getting applied immediately. Here is my code:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         height="200" height.state2="400">

    <s:states>
        <s:State name="state1"/>
        <s:State name="state2"/>
    </s:states>

    <s:transitions>

        <s:Transition fromState="state1" toState="state2" >
            <s:Sequence duration="2000" >
                <s:Rotate3D target="{this}" 
                            angleYFrom="0" angleYTo="90" 
                            startDelay="0" 
                            suspendBackgroundProcessing="true"
                            autoCenterTransform="true" />
                <s:SetAction target="{this}" property="height"/>
                <s:Rotate3D target="{this}" 
                            angleYFrom="-90" angleYTo="0" 
                            startDelay="0" 
                            suspendBackgroundProcessing="true"
                            autoCenterTransform="true" />
            </s:Sequence>
        </s:Transition>
    </s:transitions>

    <s:Rect width="100%" height="100%" >

        <s:fill>
            <s:SolidColor color="#ff0000"/>
        </s:fill>
    </s:Rect>
</s:Group>

And then in my main application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600" xmlns:local="*" 
               >

    <local:MyGroup id="group" verticalCenter="0" horizontalCenter="0" width="400"/>

    <s:Button label="Change states" click="group.currentState=group.currentState=='state1'?'state2':'state1';"/>
</s:Application>

Answer 1

The solution is to use the explicitHeight property rather than height. This is because height is a special property symbol that Flex uses.

From the SetProperty PSEUDONYMS property:

/**
 *  @private
 *  This is a table of pseudonyms.
 *  Whenever the property being overridden is found in this table,
 *  the pseudonym is saved/restored instead.
 */
private static const PSEUDONYMS:Object =
{
    width: "explicitWidth",
    height: "explicitHeight",
    currentState: "currentStateDeferred"
};

So if you've set the height then it's actually explicitHeight that is set. Keep in mind another related property called RELATED_PROPERTIES. It contains additional data on percent width and height and explicit width and height information.

For more information see mx.states.SetProperty.

To solve the problem in this case we change this:

            <s:SetAction target="{this}" property="height"/>

To this:

            <s:SetAction target="{this}" property="explicitHeight"/>