Escolher uma animação em uma lista (C#)
por Christian Wenz
O controle Animação no kit de ferramentas de controle ASP.NET AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. A estrutura também permite que o programador escolha uma animação de uma lista de animações, dependendo da avaliação de algum código JavaScript.
Visão geral
O controle Animação no kit de ferramentas de controle ASP.NET AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. A estrutura também permite que o programador escolha uma animação de uma lista de animações, dependendo da avaliação de algum código JavaScript.
Etapas
Em primeiro lugar, inclua o ScriptManager na página; em seguida, a biblioteca ASP.NET AJAX é carregada, possibilitando o uso do Kit de Ferramentas de Controle:
<asp:ScriptManager ID="asm" runat="server" />
A animação será aplicada a um painel de texto semelhante a este:
<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>
Na classe CSS associada para o painel, defina uma cor de plano de fundo agradável e também defina uma largura fixa para o painel:
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
Em seguida, adicione o AnimationExtender à página, fornecendo um ID, o TargetControlID atributo e a obrigatória runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
<Animations> No nó , use <OnLoad> para executar as animações depois que a página tiver sido totalmente carregada. Em vez de uma das animações regulares, o <Case> elemento entra em jogo. O valor de seu atributo SelectScript é avaliado; o valor retornado deve ser numérico. Dependendo desse número, uma das subanimações dentro <de Case> é executada. Por exemplo, se SelectScript for avaliado como 2, o Kit de Ferramentas de Controle executará a terceira animação dentro <de Case> (a contagem começa em 0).
A marcação a seguir define três subanimações: Redimensionar a largura, redimensionar a altura e esmaecer. Em seguida, o código JavaScript (Math.floor(3 * Math.random())) escolhe um número entre 0 e 2, para que uma das três animações seja executada:
<ajaxToolkit:AnimationExtender ID="ae" runat="server"
TargetControlID="Panel1">
<Animations>
<OnLoad>
<Case SelectScript="Math.floor(3 * Math.random())">
<Resize Width="1000" Unit="px" />
<Resize Height="150" Unit="px" />
<FadeOut Duration="1.5" Fps="24" />
</Case>
</OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>
Uma das três animações possíveis: o painel fica mais largo (clique para exibir a imagem em tamanho real)
