デスクトップアプリケーションのフレックスのドロップダウンリストのスムーズな遷移を作成するにはどうすればよいですか？

Question

私は人のタイトルを選択するためのドロップダウンリストを持っています。ドロップダウンメニューを選択するとスムーズなドロップを採用したい、フレックスに新しくなっています。

ありがとうございました。 Ravi。

Answer 1

あなたは、次のコードでフェード遷移の代わりにリサイズ遷移を使用する必要があります：

<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>