Hello,

I am trying to display a component when a ComboBox selection is
changed using transitions. The component is added to the layout then
displayed using the Iris effect. My problem is that the UI "jumps"
around when this transition is linked to the ComboBox change. It works
fine when linked to a button click. 

Here is an example of the issue. Click the button twice and the
transition works as expected. Change the dropdown and the same
transition executes but the text jumps around.

Am I doing something wrong in my transition?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
xmlns:nti="Components.*" layout="absolute">
        <mx:Script>
                <![CDATA[
        public static var ENUM_Layout: Array = [ 
                {label:"No state"},
                {label:"Show state"}
        ];              
                public function doIt():void {
                        currentState = currentState == 'showIt' ? '' : 'showIt';
                }
                ]]>
                
        </mx:Script>

        <mx:states>
                <mx:State name="showIt">
                        <mx:SetProperty target="{box}" name="visible" 
value="true"/>
                        <mx:SetProperty target="{box}" name="includeInLayout" 
value="true"/>
                </mx:State>
        </mx:states>
        
    <mx:transitions>
        <mx:Transition id="toNoneTrans" fromState="showIt" toState="*">
            <mx:Sequence id="t1" targets="{[box]}">
                <mx:Iris showTarget="false" duration="350"/>
                <mx:SetPropertyAction name="visible"/>
                <mx:SetPropertyAction name="includeInLayout"/>
            </mx:Sequence>
        </mx:Transition>
    
        <mx:Transition id="showItTrans" fromState="*" toState="showIt">
            <mx:Sequence id="t2" targets="{[box]}">
                <mx:SetPropertyAction name="includeInLayout"/>
                <mx:SetPropertyAction name="visible"/>
                <mx:Iris showTarget="true" duration="350"/>
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>   

        <mx:HBox>
                <mx:VBox>
                        <mx:Button label="Do trans" click="doIt();"/>
                        <mx:ComboBox id="inLayout" dataProvider="{ENUM_Layout}"
selectedIndex="0" change="{doIt()}"/>
                </mx:VBox>              
                <mx:VBox>
                        <mx:HBox backgroundColor="blue" width="40" height="40" 
id="box"
visible="false" includeInLayout="false"/>
                        <mx:Text text="Some filler text"/>
                </mx:VBox>
        </mx:HBox>
</mx:Application>


Reply via email to