Idioma: HTML | XAML

Animando a interface do usuário pop-up (HTML)

Use animações pop-up para mostrar e ocultar a interface do usuário pop-up, que inclui menus de contexto e submenus. Os elementos pop-up são contêineres que aparecem sobre o conteúdo do aplicativo e desaparecem quando o usuário toca ou clica fora do elemento pop-up. Essas animações são principalmente para uso em controles personalizados. Os controles de Flyout e Menu incluem as animações pop-up. Ao usar esses controles em seu aplicativo, você não precisa fornecer as animações.

Este conjunto de animações consiste nas seguintes APIs:

O vídeo a seguir demonstra as animações que mostram e ocultam uma interface do usuário pop-up:

A animação showPopup inclui uma translação, que é um movimento vertical partindo de uma posição inicial para a posição final à medida que o elemento pop-up faz fade in. A distância e a direção da translação são especificadas pelo aplicativo. Na maioria dos casos, a translação deve ser de 50 pixels, movendo-se em uma direção para cima. No entanto, quando o elemento pop-up é exibido abaixo do elemento de interface do usuário que disparou o pop-up, a conversão deve ter 50 pixels, movimentando-se para baixo. Por exemplo, essa conversão para baixo aplicaria um submenu disparado de uma barra de navegação ou de um cabeçalho de aplicativo. O objetivo é oferecer ao usuário um link visual entre o elemento pop-up e seu elemento de disparo.

Para usar as animações pop-up, você precisará saber qual objeto aparecerá ou desaparecerá e, no caso de showPopup, o deslocamento a partir do qual o objeto se moverá enquanto aparece.

Outros recursos

Para obter exemplos de código que demonstram o uso de APIs de animação de interface do usuário pop-up, consulte o Exemplo de biblioteca de animação HTML.

Para obter práticas recomendadas no uso dessas animações, consulte Diretrizes e lista de verificação para animações de interface do usuário pop-up.

Tópicos relacionados

Animando sua interface do usuário
Animando interface do usuário de borda
showPopup
hidePopup

 

 

Mostrar:
© 2015 Microsoft