How create smooth transitions for drop down list in flex for desktop applications?

Question

I have a drop down list for selecting the titles for a person, I want to employ smooth drop down when i select the drop down menu, i am new to flex, can some please help me.

Thanks and Regards, Ravi.

Answer 1

You will have to use a resize transition in the place of the fade transition in the following code:

<s:DropDownList id="dropDownList"
            dataProvider="{arrList}"
            requiresSelection="true"
            skinClass="skins.CustomDropDownListSkin"
            horizontalCenter="0"
            top="20" />


<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/28/setting-a-fade-transition-on-a-spark-dropdownlist-component-in-flex-gumbo/ -->
<s:SparkSkin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
    <s:transitions>
        <s:Transition fromState="normal" toState="open">
            <s:Fade target="{popup}" duration="3000" />
        </s:Transition>
    </s:transitions>
<!-- host component -->
    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.DropDownList")]
        ]]>
    </fx:Metadata>

    <!--- Defines the appearance of the DropDownList component's drop down area. -->
    <s:PopUp id="popup"
            open.normal="false" open.open="true"
            includeIn="open"
            left="0" right="0" top="0" bottom="0"
            visible.open="true" visible.normal="false"
            placement="below">
        <s:Group id="dropDown"
                maxHeight="134" minHeight="22"
                visible.open="true" visible.normal="false">
            <!-- border -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x686868" weight="1"/>
                </s:stroke>
            </s:Rect>

            <!--- fill --->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>

            <s:Scroller left="1" top="1" right="1" bottom="1" >
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.default.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>

            <s:filters>
                <s:DropShadowFilter blurX="20" blurY="20" distance="5" angle="90" alpha="0.6" />
            </s:filters>
        </s:Group>
    </s:PopUp>

    <s:Button id="button" left="0" right="0" top="0" bottom="0" focusEnabled="false"
        skinClass="spark.skins.default.DropDownListButtonSkin" />
    <s:SimpleText id="labelElement" verticalAlign="middle"
        left="7" right="30" top="2" bottom="2" verticalCenter="1" />

</s:SparkSkin>