Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
El control Animación del kit de herramientas de control de AJAX de ASP.NET no es solo un control, sino un marco completo para agregar animaciones a un control. La ejecución de la animación también se puede desencadenar mediante código JavaScript personalizado del lado cliente.
Visión general
El control Animación del kit de herramientas de control de AJAX de ASP.NET no es solo un control, sino un marco completo para agregar animaciones a un control. La ejecución de la animación también se puede desencadenar mediante código JavaScript personalizado del lado cliente.
Pasos
En primer lugar, incluya el ScriptManager en la página; a continuación, se carga la biblioteca ASP.NET AJAX, lo que permite usar el Control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
La animación se aplicará a un panel de texto similar al siguiente:
<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>
En la clase CSS asociada para el panel, defina un buen color de fondo y también establezca un ancho fijo para el panel:
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
A continuación, agregue el elemento AnimationExtender a la página, proporcionando un ID, el TargetControlID atributo y el obligatorio runat="server":
<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
Dentro del <Animations> nodo, use <OnClick> para ejecutar las animaciones una vez que el usuario hace clic en el panel. Agregue dos animaciones que se ejecutarán en paralelo:
<Animations>
<OnClick>
<Parallel>
<FadeOut Duration="1.5" Fps="24" />
<Resize Width="1000" Height="150" Unit="px" />
</Parallel>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>
Por motivos de demostración, esta animación (y cualquier otra animación creada mediante el Kit de herramientas de control) se ejecuta mediante código JavaScript, una vez que se ejecuta la página. En primer lugar, necesitamos acceso al AnimationExtender control. La biblioteca ASP.NET AJAX proporciona la $find() función para esta tarea:
var ae = $find("ae");
El AnimationExtender control expone una API enriquecida, incluidos los métodos con nombres idénticos a los controladores de eventos usados en el marcado XML: OnClick(), OnLoad(), etc. Por ejemplo, una llamada del OnClick() método ejecuta la animación dentro del <OnClick> elemento del AnimationExtender control :
ae.OnClick();
Este es el código JavaScript completo del lado cliente que emula el clic en el panel una vez que la página se ha cargado completamente, tenga en cuenta que se usa el pageLoad() nombre de la función al que llama ASP.NET AJAX una vez que la página y todas las bibliotecas de JavaScript incluidas se han cargado.
<script type="text/javascript">
function pageLoad() {
var ae = $find("ae");
ae.OnClick();
}
</script>
La animación se ejecuta inmediatamente, sin un clic del mouse (haga clic para ver la imagen de tamaño completo).
