WinJS 动画与 CSS 动画和过渡的使用指南
在开发中,动画的选择不应仅仅基于视觉效果,而应考虑其语义含义,在合适的时间和地点使用合适的动画。下面将详细介绍 WinJS 动画以及 CSS 动画和过渡的相关内容。
WinJS 动画使用提示
- 提示 1:所有 WinJS 动画都是使用
WinJS.UI.executeAnimation和WinJS.UI.executeTransition函数实现的,你也可以使用这些函数进行自定义动画。 - 提示 2:在动画运行时,应始终避免更改元素的内容及其影响相同属性的 CSS 属性,否则结果将不可预测且不可靠,还可能导致性能问题。
运行 WinJS 动画示例
要查看所有 WinJS 动画的实际效果,可以运行 HTML 动画库示例。该示例有 22 种不同的场景,首先应查看场景 22,确认动画是否已启用,因为这会影响你对其他场景的体验。该场景的输出将显示UISettings.animationsEnabled标志是否已设置,并允许你增加或减少 WinJS 启用计数。
WinJS 动画方法的特点
- 返回 Promise:所有动画方法都返回一个 Promise,当动画完成时,你可以使用它来采取额外的操作。这些 Promise 封装了
transitionend和animation