DocumentTimeline

在此页

构造函数
特性
范例
规范
浏览器兼容性
另请参阅
相关话题

这是实验性技术
检查浏览器兼容性表格要小心谨慎在生产中使用这之前。

DocumentTimeline 接口的 Web 动画 API 表示动画时间线，包括默认的文档时间线 (访问凭借 Document.timeline ).

构造函数

DocumentTimeline(): 创建新的 DocumentTimeline object associated with the active document of the current browsing context.

特性

此接口从其父级继承特性 AnimationTimeline .

AnimationTimeline.currentTime: Returns the time value in milliseconds for this timeline or null if it is inactive.

范例

We could share a single documentTimeline among multiple animations, thus allowing us to manipulate just that group of animations via their shared timeline. This bit of code would start all the cats animating 500 milliseconds into their animations:

const cats = document.querySelectorAll('.sharedTimelineCat');
const sharedTimeline = new DocumentTimeline({ originTime: 500 });
for (const cat of cats) {
  const catKeyframes = new KeyframeEffect(cat, keyframes, timing);
  const catAnimation = new Animation(catKeyframes, sharedTimeline);
  catAnimation.play();
}

规范

规范	状态	注释
Web 动画在该规范中的 DocumentTimeline 定义。	工作草案	编者草案。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DocumentTimeline`	Chrome 54	Edge ≤79	Firefox 75 75 63 Disabled Disabled From version 63: this feature is behind the `dom.animations-api.timelines.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 不支持 50 — 63 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera No	Safari 13.1	WebView Android 54	Chrome Android 54	Firefox Android 63 Disabled 63 Disabled Disabled From version 63: this feature is behind the `dom.animations-api.timelines.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 不支持 50 — 63 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android No	Safari iOS 13.4	Samsung Internet Android 6.0
`DocumentTimeline()` 构造函数	Chrome 61	Edge 79	Firefox 75 75 63 Disabled Disabled From version 63: this feature is behind the `dom.animations-api.timelines.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 不支持 50 — 63 Disabled Disabled ). To change preferences in Firefox, visit	IE No	Opera No	Safari 13.1	WebView Android 61	Chrome Android 61	Firefox Android 63 Disabled 63 Disabled Disabled From version 63: this feature is behind the `dom.animations-api.timelines.enabled` preference (needs to be set to `true` ). To change preferences in Firefox, visit about:config. 不支持 50 — 63 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android No	Safari iOS 13.4	Samsung Internet Android 8.0

在此页

构造函数

特性

范例

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题