这是
实验性技术
检查
浏览器兼容性表格
要小心谨慎在生产中使用这之前。
只读
Animation.replaceState
特性为
Web 动画 API
返回
replace state
of the animation. This will be
active
if the animation has been removed, or
persisted
if
Animation.persist()
has been invoked on it.
let myReplaceState = Animation.replaceState;
A string that represents the replace state of the anmation. The value can be one of:
active
: The initial value of the animation's replace state; when the animation has been removed by the browser's
自动移除填充动画
behavior.
persisted
: The animation has been explicitly persisted by invoking
Animation.persist()
on it.
removed
: The animation has been explicitly removed.
In our simple replace indefinite animations demo , you can see the following code:
const divElem = document.querySelector('div');
document.body.addEventListener('mousemove', evt => {
let anim = divElem.animate(
{ transform: `translate(${ evt.clientX}px, ${evt.clientY}px)` },
{ duration: 500, fill: 'forwards' }
);
anim.commitStyles();
//anim.persist()
anim.onremove = function() {
console.log('Animation removed');
}
console.log(anim.replaceState);
});
Here we have a
<div>
element, and an event listener that fires the event handler code whenever the mouse moves. The event handler sets up an animation that animates the <div> element to the position of the mouse pointer. This could result in a huge animations list, which could create a memory leak. For this reason, modern browsers automatically remove overriding forward filling animations.
You can see the
replaceState
of the animation being logged at the end of the handler. This will be
active
for each animation by default, or
persisted
若
persist()
call is uncommented.
| 规范 | 状态 | 注释 |
|---|---|---|
|
Web 动画
The definition of 'Animation.replaceState' in that specification. |
工作草案 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
replaceState
|
Chrome
不支持
No
注意事项
|
Edge 不支持 No | Firefox 75 | IE 不支持 No | Opera 不支持 No | Safari 13.1 | WebView Android 不支持 No |
Chrome Android
不支持
No
注意事项
|
Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 13.4 | Samsung Internet Android 不支持 No |
完整支持
不支持
实验。期望将来行为有所改变。
见实现注意事项。
动画