Sdílet prostřednictvím

Animace závislá na podmínce (C#)

  • Č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 se animace spustí 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 se animace spustí 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 . Pak se načte ASP.NET knihovna AJAX, což umožňuje použití sady nástrojů Control Toolkit:

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

Animace se použije u panelu textu, který vypadá 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říjemnou barvu pozadí a také nastavte pevnou šířku panelu:

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

Pak na stránku IDTargetControlID přidejte AnimationExtender , atribut a povinný atribut .runat="server":

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

V rámci <Animations> uzlu použijte <OnLoad> ke spuštění animací, jakmile je stránka plně načtená. Místo jedné z běžných animací <Condition> přichází prvek do hry. 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 poskytuje dvě animace, z nichž každá se spouští v 50 % případů náhodně. Vzhledem k tomu, že uvnitř <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() &lt; 0.5">
          <Resize Width="1000" Height="150" Unit="px" />
        </Condition>
        <Condition ConditionScript="Math.random() &lt; 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 se spustí jedna z těchto dvou animací, nebo obojí.

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

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

PředchozíDalší