AJAX ControlToolkit學習日誌-UpdatePanelAnimationExtender(30)

         UpdatePanelAnimationExtender控制項用於在UpdatePanel發生更新時，產生動畫效果。

下面來看一個樣本：

1)在VS2005中建立一個ASP.NET AJAX-Enabled Web Project項目工程，命名為UpdatePanelAnimationExtender1。

2)在頁面上拖放一個UpdatePanel,在其裡拖放一個Label用於顯示時間。然後再拖放3個CheckBox，用於設定不同的動畫效果。

代碼如下：

 1    <div id="up1" style="background-color: #40669A;">
 2        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 3            <ContentTemplate>
 4                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
 5            </ContentTemplate>
 6            <Triggers>
 7                <asp:AsyncPostBackTrigger ControlID="btnUpdate" />
 8            </Triggers>
 9        </asp:UpdatePanel>
10        &nbsp;</div>
11        <div>
12        Choose the effects, then press 'Update':<br />
13        <input type="checkbox" id="effect_fade" checked="checked" /><label for="effect_fade">Fade</label><br />
14        <input type="checkbox" id="effect_collapse" checked="checked" /><label for="effect_collapse">Collapse</label><br />
15        <input type="checkbox" id="effect_color" checked="checked" /><label for="effect_color">Color Background</label><br />
16        <asp:Button ID="btnUpdate" runat="server" Text="Update" OnClick="btnUpdate_Click" />
17        </div>

3)然後在頁面上拖放一個UpdatePanelAnimationExtender，用於控制動畫效果。

代碼如下：
        <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" BehaviorID="animation" runat="server" TargetControlID="UpdatePanel1">
            <Animations>
                <OnUpdating>
                    <Sequence>
                        <%-- Store the original height of the panel --%>
                        <ScriptAction Script="var b = $find('animation'); b._originalHeight = b._element.offsetHeight;" />
                        <%-- Disable all the controls --%>
                        <Parallel duration="0">
                            <EnableAction AnimationTarget="btnUpdate" Enabled="false" />
                            <EnableAction AnimationTarget="effect_color" Enabled="false" />
                            <EnableAction AnimationTarget="effect_collapse" Enabled="false" />
                            <EnableAction AnimationTarget="effect_fade" Enabled="false" />
                        </Parallel>
                        <StyleAction Attribute="overflow" Value="hidden" />
                        <%-- Do each of the selected effects --%>
                        <Parallel duration=".25" Fps="30">
                            <Condition ConditionScript="$get('effect_fade').checked">
                                <FadeOut AnimationTarget="up_container" minimumOpacity=".2" />
                            </Condition>
                            <Condition ConditionScript="$get('effect_collapse').checked">
                                <Resize Height="0" />
                            </Condition>
                            <Condition ConditionScript="$get('effect_color').checked">
                                <Color AnimationTarget="up_container" PropertyKey="backgroundColor"
                                    EndValue="#FF0000" StartValue="#40669A" />
                            </Condition>
                        </Parallel>
                    </Sequence>
                </OnUpdating>
                <OnUpdated>
                    <Sequence>
                        <%-- Do each of the selected effects --%>
                        <Parallel duration=".25" Fps="30">
                            <Condition ConditionScript="$get('effect_fade').checked">
                                <FadeIn AnimationTarget="up_container" minimumOpacity=".2" />
                            </Condition>
                            <Condition ConditionScript="$get('effect_collapse').checked">
                                <%-- Get the stored height --%>
                                <Resize HeightScript="$find('animation')._originalHeight" />
                            </Condition>
                            <Condition ConditionScript="$get('effect_color').checked">
                                <Color AnimationTarget="up_container" PropertyKey="backgroundColor"
                                    StartValue="#FF0000" EndValue="#40669A" />
                            </Condition>
                        </Parallel>
                        <%-- Enable all the controls --%>
                        <Parallel duration="0">
                            <EnableAction AnimationTarget="effect_fade" Enabled="true" />
                            <EnableAction AnimationTarget="effect_collapse" Enabled="true" />
                            <EnableAction AnimationTarget="effect_color" Enabled="true" />
                            <EnableAction AnimationTarget="btnUpdate" Enabled="true" />
                        </Parallel>                           
                    </Sequence>
                </OnUpdated>
            </Animations>
        </cc1:UpdatePanelAnimationExtender>
4)對Page_load和"btnUpdate"按鈕添加事件處理。
代碼如下：
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                this.Label1.Text = DateTime.Now.ToString();
            }
        }

        protected void btnUpdate_Click(object sender, EventArgs e)
        {
            this.Label1.Text = DateTime.Now.ToString();
        }
5)按下CTRL+F5,在瀏覽器中查看效果。
如下：