Animacja w zależności od warunku (C#)

Autor: Christian Wenz

Pobierz plik PDF

Kontrolka Animacja w zestawie narzędzi kontroli AJAX ASP.NET to nie tylko kontrolka, ale cała struktura umożliwiająca dodawanie animacji do kontrolki. To, czy animacja jest uruchamiana, czy nie, zależy również od warunku w postaci kodu JavaScript.

Omówienie

Kontrolka Animacja w zestawie narzędzi kontroli AJAX ASP.NET to nie tylko kontrolka, ale cała struktura umożliwiająca dodawanie animacji do kontrolki. To, czy animacja jest uruchamiana, czy nie, zależy również od warunku w postaci kodu JavaScript.

Kroki

Najpierw dołącz element ScriptManager na stronie, a następnie załadowano bibliotekę ASP.NET AJAX, umożliwiając korzystanie z zestawu narzędzi Control Toolkit:

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

Animacja zostanie zastosowana do panelu tekstu, który wygląda następująco:

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

W skojarzonej klasie CSS dla panelu zdefiniuj ładny kolor tła, a także ustaw stałą szerokość panelu:

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

Następnie dodaj element AnimationExtender do strony, podając IDatrybut , TargetControlID i obowiązkowy runat="server":

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

W węźle <Animations> użyj polecenia <OnLoad> , aby uruchomić animacje po pełnym załadowaniu strony. Zamiast jednej z zwykłych animacji, <Condition> element wchodzi w grę. Kod JavaScript podany jako wartość atrybutu ConditionScript jest wykonywany w czasie wykonywania. Jeśli zostanie obliczona wartość true, animacja zostanie wykonana, w przeciwnym razie nie. Poniższa adiustacja zawiera dwie animacje, z których każda jest wykonywana w 50% przypadków po losowych przypadkach. Ponieważ w programie <OnLoad>może znajdować się tylko jedna animacja , dwie <Condition> animacje są łączone razem przy użyciu <Sequence> elementu :

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

Należy pamiętać, że znak mniejszy niż (<) w atrybucie ConditionScript musi zostać unikowany (). Po uruchomieniu tego skryptu nie zostanie uruchomiona żadna animacja lub jedna z tych dwóch czynności lub obie te czynności.

Panel jest zanikający bez zmiany rozmiaru, więc druga animacja jest uruchamiana, pierwsza nie (kliknij, aby wyświetlić obraz pełnowymiarowy)

WsteczDalej