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 </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,在浏览器中查看效果。
效果图如下：
