创建添加和删除列表的动画 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

使用列表动画可以将更改显示到相似项目集合中。这包括添加和删除动画。请注意,此处的字词“列表”所包含的意义大于标准的杂货清单形式,例如,网格。 这些动画为项目的加入或退出提供了流畅的视觉过渡,用户可以直观了解发生的事情。在添加动画过程中,现有项目会滑出,为新项目腾出空间。然后新项目淡入空间,逐渐放大。删除动画是一个相反的过程。

此动画集包括以下 API:

在列表中添加/删除动画

使用列表动画可以显示向相似项目集合中插入项目或从该集合中删除项目的情况。这些动画与在搜索列表动画中添加/删除动画的不同之处在于,搜索动画更快一些,能够适应在用户输入搜索字词时筛选搜索结果。

以下视频演示将项添加到列表和从列表中删除项的动画:

在搜索列表中添加/删除动画

在列表中的项目作为搜索方案的一部分快速变化时,使用搜索列表动画。这组动画与用于在列表中添加和删除动画的区别在于计时。搜索列表动画能够更快地响应连续筛选等情况。例如,在用户输入某个搜索字词以搜索列表中的项目时,该列表将实时筛选结果,筛选出的项目应使用从搜索列表中删除的动画。相反,如果用户搜索了某个字符串,然后按 Backspace 键从搜索字词中删除一个字符,则又添加到搜索结果列表中的任何项都应使用添加到搜索列表动画。

以下视频演示将项添加到搜索列表和从搜索列表中删除项的动画:

其他资源

有关用于展示淡化动画 API 的使用的代码示例,请参阅 HTML 动画库示例

有关设计这些动画的使用的最佳做法,请参阅添加和删除动画指南和清单

相关主题

创建 UI 动画

createAddToListAnimation

createDeleteFromListAnimation

createAddToSearchListAnimation

createDeleteFromSearchListAnimation