Sdílet prostřednictvím

Animace závislá na podmínce (VB)

  • Článek

Christian Wenz

Stáhnout PDF

Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. To, jestli je animace spuštěná nebo ne, může také záviset na podmínce ve formě nějakého kódu JavaScriptu.

Přehled

Ovládací prvek Animace v ASP.NET AJAX Control Toolkit není jen ovládací prvek, ale celá architektura pro přidání animací do ovládacího prvku. To, jestli je animace spuštěná nebo ne, může také záviset na podmínce ve formě nějakého kódu JavaScriptu.

Postup

Nejprve na stránce zahrňte ScriptManager položku. Potom se načte knihovna AJAX ASP.NET, která umožňuje použití sady nástrojů Control Toolkit:

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

Animace se použije na panel textu, který bude vypadat takto:

<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>

V přidružené třídě CSS pro panel definujte pěknou barvu pozadí a také nastavte pevnou šířku panelu:

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

Potom přidejte AnimationExtender na stránku IDatribut , TargetControlID atribut a povinný runat="server":

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

<Animations> V uzlu použijte <OnLoad> ke spuštění animací po úplném načtení stránky. Místo jedné z běžných animací <Condition> přichází do hry prvek. Kód JavaScriptu zadaný jako hodnota atributu ConditionScript se spustí za běhu. Pokud se vyhodnotí jako true, animace se spustí, jinak ne. Následující kód obsahuje dvě animace, z nichž každá se spouští v 50 % případů náhodně. Vzhledem k tomu, že v souboru <OnLoad>může být pouze jedna animace, jsou tyto dvě <Condition> animace spojeny dohromady pomocí elementu <Sequence> :

<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>

Všimněte si, že znak menší než (<) v atributu ConditionScript musí být řídicí znak (). Když spustíte tento skript, buď se nespustí žádná animace, nebo jedna z těchto dvou ano, nebo obojí.

Panel se zmizí bez změny velikosti, takže se spustí druhá animace, první ne

Panel se zmizí bez změny velikosti, takže se spustí druhá animace, první ne (Kliknutím zobrazíte obrázek v plné velikosti).

PředchozíDalší