如何在桌面應用程序的flex中爲下拉列表創建平滑過渡？

Question

我有一個下拉列表來選擇一個人的標題，當我選擇下拉菜單時，我想要使用平滑下拉菜單，我是新的flex，可以請一些人幫助我。

感謝和問候， 拉維。

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>