使用客户端代码执行动画 (C#)

  • 项目

作者 ：Christian Wenz

下载 PDF

ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件，而且是用于向控件添加动画的整个框架。 还可以使用自定义客户端 JavaScript 代码触发动画执行。

概述

ASP.NET AJAX 控件工具包中的动画控件不仅是一个控件，而且是用于向控件添加动画的整个框架。 还可以使用自定义客户端 JavaScript 代码触发动画执行。

步骤

首先，在页面中包括 ScriptManager ;然后加载 ASP.NET AJAX 库，从而可以使用 Control Toolkit：

<asp:ScriptManager ID="asm" runat="server" />

动画将应用于如下所示的文本面板：

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

在面板的关联 CSS 类中，定义漂亮的背景色，并为面板设置固定宽度：

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

然后，将 添加到 AnimationExtender 页面，并提供 ID、 TargetControlID 属性和强制 runat="server"：

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

在 节点中 <Animations> ，使用 <OnClick> 在用户单击面板后运行动画。 添加要并行执行的两个动画：

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

为了便于演示，此动画 (，使用 Control Toolkit) 创建的任何其他动画在页面运行后使用 JavaScript 代码执行。 首先，我们需要访问 控件 AnimationExtender 。 ASP.NET AJAX 库为此任务提供 $find() 函数：

var ae = $find("ae");

控件 AnimationExtender 公开一个丰富的 API，包括名称与 XML 标记中使用的事件处理程序相同的方法： OnClick()、 OnLoad()等。 例如， 对 方法的OnClick()调用在 控件的 AnimationExtender 元素中<OnClick>执行动画：

ae.OnClick();

下面是完整的客户端 JavaScript 代码，该代码模拟页面完全加载后在面板上的单击操作。请注意 pageLoad() ，在加载页面和所有包含的 JavaScript 库后，ASP.NET AJAX 将调用该函数名称。

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

动画立即运行，无需单击鼠标

动画立即运行，无需单击鼠标 (单击即可查看全尺寸图像)

上一页下一页