时间戳

首页 > 解决方案 > 如何在使用 Web Animations API 完成之前暂停动画？

javascript - 如何在使用 Web Animations API 完成之前暂停动画？

问题描述

我正在用 javascript 编写一个库，它使用Web Animations API执行一些动画。似乎默认情况下，一旦动画完成，所有内容都会在视觉上重置为动画开始之前的状态。

onfinish什么是在动画完成状态下或在回调执行之前“暂停”动画的可靠方法？

这是一个例子：

var elem = document.querySelector('.pulse');
var animation = elem.animate(
  {
    opacity: [1, 0.5],
    transform: ['scale(1)', 'scale(0.5)']
  },
  {
    duration: 500
  }
);
animation.play();

// This works... but.. 10ms less than the duration?
// This cannot be very reliable...
setTimeout(function() {
  animation.pause();
}, 490);
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<div class="pulse" style="width: 150px;">
  Hello world!
</div>

我想在不使用setTimeout. 执行回调时onfinish，动画已经结束，看起来就像动画刚开始时一样。

标签： javascript

解决方案

虽然@andu-andrici 的回答让我朝着正确的方向前进，但我正在寻求 Web Animations API 中的解决方案。

解决方案是在调用的第二个参数中添加fill: 'forwards'到对象.animate()。像这样：

var elem = document.querySelector('.pulse');
var animation = elem.animate(
  {
    opacity: [1, 0.5],
    transform: ['scale(1)', 'scale(0.5)']
  },
  {
    duration: 500,
    fill: 'forwards'
  }
);
animation.play();
<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<div class="pulse" style="width: 150px;">
    Hello world!
</div>

推荐阅读