Idioma: HTML | XAML

Animando adições e exclusões de lista (aplicativos do Tempo de Execução do Windows em JavaScript e HTML)

Applies to Windows and Windows Phone

Use animações de lista para mostrar as alterações a uma coleção de itens semelhantes. Isso inclui adicionar e excluir animações. Observe que o termo "lista" aqui envolve mais do que o formulário de lista de supermercado padrão; por exemplo, uma grade. Estas animações proporcionam uma transição visual suave para a entrada ou saída dos itens, tornando o processo óbvio para o usuário. Durante uma animação de "adição", os itens existentes deslizam para fora do caminho para abrir espaço para o novo item. Então, o novo item desaparece no espaço, sendo subindo como normalmente. Uma animação de exclusão faz o contrário.

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

Animações de adição/exclusão de lista

Use animações de lista para mostrar a inserção ou exclusão de itens em uma coleção de itens semelhantes. Essas animações são diferentes das animações de adição/exclusão da lista de pesquisa, pois as animações de pesquisa são relativamente mais rápidas para acomodarem os resultados de pesquisa de filtragem enquanto o usuário insere o termo de pesquisa.

O vídeo a seguir demonstra as animações que adicionam e removem itens de uma lista:

Animações de adição/exclusão de lista de pesquisa

Use as animações de lista de pesquisa quando os itens em uma lista estiverem mudando rapidamente como parte de um cenário de pesquisa. Esse conjunto de animações é diferente em termos de temporização das animações para adição e exclusão de listas. As animações de lista de pesquisa respondem com mais rapidez a cenários como a filtragem contínua. Por exemplo, enquanto um usuário insere um termo de pesquisa para procurar um item em uma lista e esta filtra os resultados em tempo real, os itens filtrados deverão usar a animação de exclusão da lista de pesquisa. Em contrapartida, se um usuário pesquisou uma cadeia de caracteres e pressionou a tecla Backspace para remover um caractere do termo de pesquisa, todos os itens adicionados de volta à lista de resultados da pesquisa deverão usar a animação de adição à lista de pesquisa.

O vídeo a seguir demonstra as animações que adicionam e removem itens de uma lista de pesquisa:

Outros recursos

Para obter exemplos de código que demonstram o uso de APIs de animação de fade, 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 adição e exclusão.

Tópicos relacionados

Animando sua interface do usuário
createAddToListAnimation
createDeleteFromListAnimation
createAddToSearchListAnimation
createDeleteFromSearchListAnimation

 

 

Mostrar:
© 2014 Microsoft