代码之家 › 专栏 › 技术社区 › user21950483

动画commitStyles实际上并没有设置样式

web-animations animation css javascript

user21950483 · 技术社区 · 3 年前

我正试着打电话 commitStyles() 动画完成后,以一种可执行的方式在末尾保留样式(通过添加到内联样式)。然而,调用commitStyles似乎不会发生任何事情,元素只是在动画之后返回到其初始样式。

为什么打电话 Animation.commitStyles 动画结束时不工作?

document.querySelector("button").addEventListener("click", function(evt) {
  var a = document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], 1000);
  a.finished.then(() => a.commitStyles());
});

<div id="target">I can move</div>
<button>Move it</button>

1 回复 | 直到 3 年前

Unmitigated 3 年前

默认值 fill 对于动画是 "none" ,这将使元素在动画完成后恢复到其原始样式。使命感 commitStyles 在这一点上基本上没有效果。

相反,您可以使用 "forwards" 填充以在动画之后保留样式。然后,打电话 commitStyles() 动画完成后立即 cancel 动画,以确保不再消耗资源。请注意,设置 填满 可以自己达到坚持风格的效果,但也有几个缺点;例如,很难更改由动画设置的元素上的任何样式(不使用 commitStyles )并且浏览器必须无限期地保持动画。

document.querySelector("button").addEventListener("click", evt => {
  document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], {
    duration: 1000,
    fill: "forwards"
  }).finished.then(a => {
    a.commitStyles();
    a.cancel();
  });
});

<div id="target">I can move</div>
<button>Move it</button>

顺便说一句,你可以看到 commitStyles 确实有效之前动画结束(无需设置 填满 )因为动画样式在那时仍然是活动的。

document.querySelector("button").addEventListener("click", evt => {
  const anim = document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], 1000);
  // Do NOT use this approach
  setTimeout(() => anim.commitStyles(), 950);
});

<div id=“target”>我可以移动</div>
<按钮>移动它</按钮>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前