Animazione dell'interfaccia utente popup (HTML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Usa le animazioni popup per mostrare e nascondere l'interfaccia utente popup, che include menu di scelta rapida e riquadri a comparsa. Gli elementi popup sono contenitori che vengono visualizzati sopra il contenuto dell'app e che scompaiono se l'utente tocca o fa clic all'esterno dell'elemento popup. Queste animazioni vengono applicate principalmente ai controlli personalizzati. I controlli Flyout e Menu includono le animazioni popup. Se usi questi controlli nella tua app, eviti la necessità di predisporle manualmente.

Questo insieme di animazioni include le API seguenti:

Il video seguente illustra le animazioni che mostrano e nascondono l'interfaccia utente popup:

L'animazione showPopup include una traslazione, ossia un movimento verticale da una posizione iniziale alla posizione finale mentre l'elemento popup entra o esce con un effetto di dissolvenza. La distanza e la direzione della traslazione sono specificate dall'app. Nella maggior parte dei casi la traslazione deve essere di 50 pixel, con direzione verso l'alto. Tuttavia, se l'elemento popup viene visualizzato sotto l'elemento di interfaccia utente che ha attivato il popup, la traslazione deve essere di 50 pixel, con direzione verso il basso. Ad esempio, questa traslazione verso il basso è applicabile a un riquadro a comparsa attivato da una barra di spostamento o da un'intestazione dell'app. Lo scopo è offrire all'utente un collegamento visivo tra l'elemento popup e l'elemento che lo ha attivato.

Per usare le animazioni popup devi conoscere l'oggetto che comparirà o scomparirà e, nel caso dell'animazione showPopup, l'offset da cui l'oggetto si muoverà mentre viene visualizzato.

Altre risorse

Per esempi di codice che dimostrano l'uso delle API per l'animazione dell'interfaccia utente popup, vedi l'esempio relativo alla libreria di animazioni HTML.

Per scoprire le procedure consigliate per la progettazione e l'uso di queste animazioni, vedi Linee guida ed elenco di controllo per le animazioni dell'interfaccia utente popup.

Argomenti correlati

Animazione dell'interfaccia utente

Animazione dell'interfaccia utente basata su bordi

showPopup

hidePopup