Deshabilitar las acciones durante la animación (C#)

por Christian Wenz

Descargar código o Descargar PDF

El control de animación de ASP.NET AJAX control Toolkit no es solo un control, sino un marco de trabajo completo para agregar animaciones a un control. También admite acciones, como clics del mouse. Sin embargo, cuando un clic del mouse inicia una animación, es conveniente deshabilitar los clics del mouse durante la animación.

Información general

El control de animación de ASP.NET AJAX control Toolkit no es solo un control, sino un marco de trabajo completo para agregar animaciones a un control. También admite acciones, como clics del mouse. Sin embargo, cuando un clic del mouse inicia una animación, es conveniente deshabilitar los clics del mouse durante la animación.

Pasos

En primer lugar, incluya el ScriptManager en la página; después, se carga la biblioteca de ASP.NET AJAX, lo que permite usar el kit de herramientas de control:

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

La animación se aplicará a un botón HTML similar al siguiente:

<input type="button" ID="Button1" runat="server" Value="Launch Animation" />

Tenga en cuenta que se usa un control HTML en lugar de un control Web, ya que no se desea que el botón cree un postback; solo se iniciará la animación del lado cliente.

A continuación, agregue el AnimationExtender a la página, proporcionando un ID, el atributo TargetControlID y el runat="server"obligatorio:

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

Dentro del nodo <Animations>, <OnClick> es el elemento adecuado para controlar el clic del mouse. Sin embargo, también se puede hacer clic en el botón durante la animación. El elemento <EnableAction> puede encargarse de ello. Al establecer Enabled="false", se deshabilita el botón como parte de la animación. Dado que usamos varias animaciones individuales (deshabilitando el botón y las animaciones reales), el elemento <Parallel> es necesario para pegar las animaciones individuales en una sola. Este es el marcado completo de 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>

También sería posible volver a habilitar para el botón después de la animación, utilizando el siguiente elemento XML al final de la lista:

<EnableAction Enabled="true" />

Sin embargo, en el escenario dado esto sería inútil, ya que el botón se atenúa y no está visible al final de la animación.

el botón está deshabilitado en cuanto se ejecuta la animación

El botón está deshabilitado en cuanto se ejecuta la animación (haga clic para ver la imagen de tamaño completo)