Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Animación de transiciones de contenido (aplicaciones de la Tienda Windows con JavaScript y HTML)

Usa animaciones de transición de contenido para cambiar el contenido de un área de la pantalla sin cambiar el contenedor ni el fondo. El contenido nuevo que aparece en pantalla se desliza desde un desplazamiento según va realizando el fundido de entrada. Si hay contenido existente para sustituir, el contenido antiguo realiza un fundido de salida según llega el contenido nuevo. Normalmente, usarás estas animaciones en el caso de navegación de pantalla dividida, donde se le muestra al usuario una lista y una vista detallada. Las animaciones de transición de contenido también se usan para mostrar contenido que se carga después que el resto de la página, cuando la aplicación realiza la transición de una página a otra.

Este conjunto de animaciones se compone de las siguientes API:

En el vídeo siguiente se muestran animaciones que quitan contenido existente y muestran contenido nuevo:

|

Ten en cuenta que no es necesario que el contenido original y el sustituto tengan el mismo diseño o tamaño.

Para usar las API de transición de contenido, has de conocer lo siguiente:

  • Los objetos salientes
  • Los objetos entrantes
  • La distancia y la dirección en que se deslizará el contenido entrante a medida que aparezca.
    • La distancia recomendada es 40 píxeles.

Otros recursos

Consulta el ejemplo sobre el uso de las animaciones de la Biblioteca de animaciones para obtener ejemplos de códigos que muestran el uso de las API de animaciones de transiciones de contenido.

Consulta Directrices y lista de comprobación para animaciones de transiciones de contenido para conocer los procedimientos recomendados de diseño para el uso de estas animaciones.

Temas relacionados

Animación de la interfaz de usuario
Animación de transiciones de página
enterContent
exitContent

 

 

Mostrar:
© 2018 Microsoft