语言: HTML | XAML

创建淡化动画 (HTML)

Applies to Windows and Windows Phone

使用淡化动画可以将项目引入或引出视图。共有三种淡化动画:淡入、淡出和交叉进出。每种动画都针对一种不同的情形设计。

此动画集包括以下功能:

以下视频演示将内容淡入视图和淡出视图的动画。请注意屏幕底部淡入和淡出的滚动条:

以下视频演示交叉进出动画:

|

淡入

使用淡入动画可将一个或一组项目引入位置。可以在应用栏中看到淡入动画的示例,其中新控件可以作为用户交互的结果显示。还应当在动态加载内容时使用淡入动画从占位符项过渡到实际项,或者显示自定义工具提示或对话框控件。

注意,Windows 工具提示和对话框控件包括淡入和淡出动画。

淡出

使用淡出动画可以从视图中删除一个或一组项目。在过渡控件(如滚动栏或平移指示器)中可以看到淡出动画的示例,淡出动画在经过一段时间并且没有检测到用户输入之后消失。

交叉进出

使用交叉进出动画可以将现有项就地替换为传入项。该动画在将替换项淡入空间之后会淡出相同空间的现有项。

其他资源

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

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

相关主题

创建 UI 动画
fadeIn
fadeOut
crossFade

 

 

显示:
© 2014 Microsoft