[英]How create smooth transitions for drop down list in flex for desktop applications?
我有一個下拉菜單供選擇一個人的標題,我想在選擇下拉菜單時采用順暢的下拉菜單,我是剛接觸Flex的人,請有些幫助。
謝謝,拉維。
在以下代碼中,您將必須使用調整大小過渡來代替淡入淡出過渡:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.