Udostępnij za pośrednictwem

Animacja w zależności od warunku (VB)

  • Artykuł

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

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 zanika bez zmiany rozmiaru, więc druga animacja jest uruchamiana, pierwsza nie

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

WsteczDalej