取决于条件的动画 (VB)

  • 项目

作者 ：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> ，使用 <OnLoad> 在页面完全加载后运行动画。 元素将发挥作用， <Condition> 而不是常规动画之一。 作为 ConditionScript 属性值提供的 JavaScript 代码在运行时执行。 如果计算结果为 true，则执行动画，否则不执行。 以下标记提供两个动画，每个动画在 50% 的情况下随机执行。 由于 中<OnLoad>可能只有一个动画，因此使用 <Sequence> 元素将两<Condition>个动画联接在一起：

<ajaxToolkit:AnimationExtender ID="ae" runat="server"
 TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Sequence>
 <Condition ConditionScript="Math.random()   0.5">
 <Resize Width="1000" Height="150" Unit="px" />
 </Condition>
 <Condition ConditionScript="Math.random()   0.5">
 <FadeOut Duration="1.5" Fps="24" />
 </Condition>
 </Sequence>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

请注意，属性中ConditionScript小于符号 (<) 必须转义 () 。 运行此脚本时，要么不运行动画，要么两者中的一个运行，或者两者都运行。

面板在未调整大小的情况下淡出，因此第二个动画运行，第一个动画没有

面板在未调整大小的情况下淡出，因此第二个动画运行，第一个动画没有 (单击以查看全尺寸图像)

上一页下一页