DocumentTimeline

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

DocumentTimeline interface of the the Web Animations API represents animation timelines, including the default document timeline (accessed via Document.timeline ).

构造函数

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

特性

This interface inherits its property from its parent, 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();
}
					

规范

规范 状态 Comment
Web 动画
The definition of 'DocumentTimeline' in that specification.
工作草案 Editor's draft.

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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 From version 50 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
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 From version 50 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
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 From version 50 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
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 From version 50 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config.
Opera Android No Safari iOS 13.4 Samsung Internet Android 8.0

图例

完整支持
完整支持
不支持
不支持
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅