Desabilitar ações durante a animação (VB)
por Christian Wenz
O controle Animação no ASP.NET Kit de Ferramentas de Controle AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. Ele também dá suporte a ações, como cliques do mouse. No entanto, quando um clique do mouse inicia uma animação, é desejável desabilitar cliques do mouse durante a animação.
Visão geral
O controle Animação no ASP.NET Kit de Ferramentas de Controle AJAX não é apenas um controle, mas uma estrutura inteira para adicionar animações a um controle. Ele também dá suporte a ações, como cliques do mouse. No entanto, quando um clique do mouse inicia uma animação, é desejável desabilitar cliques do mouse durante a animação.
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 botão HTML como este:
<input type="button" ID="Button1" runat="server" Value="Launch Animation" />
Observe que um controle HTML é usado em vez de um controle da Web, pois não queremos que o botão crie um postback; ele deve apenas iniciar a animação do lado do cliente para nós.
Em seguida, adicione o AnimationExtender à página, fornecendo um ID, o TargetControlID atributo e o obrigatório runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
Dentro do <Animations> nó, <OnClick> é o elemento certo para lidar com o clique do mouse. No entanto, o botão também pode ser clicado durante a animação. O <EnableAction> elemento pode cuidar disso. A configuração Enabled="false" desabilita o botão como parte da animação. Como estamos usando várias animações individuais (desabilitando o botão e as animações reais), o <Parallel> elemento é necessário para colar as animações individuais em uma. Aqui está a marcação completa para AnimationExtender:
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Button1">
<Animations>
<OnClick>
<Parallel>
<EnableAction Enabled="false" />
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
Também seria possível habilitar novamente o botão após a animação, usando o seguinte elemento XML no final da lista:
<EnableAction Enabled="true" />
No entanto, no cenário especificado, isso seria inútil, pois o botão desaparece e não fica visível no final da animação.
O botão é desabilitado assim que a animação é executada (Clique para exibir a imagem em tamanho real)
