取决于条件的动画 (C#)
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
小于符号 (<
) 必须进行转义 () 。 运行此脚本时,不运行动画,或者其中一个运行动画,或者两者都运行。
面板在未调整大小的情况下淡出,因此第二个动画运行,第一个动画没有 (单击以查看全尺寸图像)