原生JavaScript Animation API能否单表达式调用animate并定义完成回调？

你想要的单条表达式链式绑定回调的需求完全可以实现，有两种常用的实现方式：

• 第一种：用标准API直接实现，不需要额外兼容代码
  Web Animation API中element.animate()方法调用后会直接返回Animation实例，该实例继承自EventTarget，原生支持链式调用addEventListener绑定完成事件，合法写法如下：

Snackbar.rootElement.animate([
  {
    opacity: 1,
    transform: "none"
  },
  {
    opacity: 0,
    transform: "translateY(-200%)"
  }
], {
  duration: 500,
  easing: "ease-in"
})
.addEventListener('finish', () => {
  Snackbar.rootElement.remove();
});

这种写法是完全符合标准的合法语法，所有支持Web Animation API的浏览器都可以直接运行，单条表达式即可完成实例化、绑定回调、播放动画的全部操作，不需要拆分成三步。

• 第二种：扩展原型实现你示例中的onfinish链式方法语法
  如果你偏好示例里的onfinish(handler)调用风格，可以给Animation原型添加一个辅助方法，一次定义全局可用：

// 全局注册辅助方法，仅需要执行一次
Animation.prototype.onFinish = function (handler) {
  this.onfinish = handler;
  return this;
};

// 之后就可以按你想要的语法调用了
Snackbar.rootElement.animate([
  {
    opacity: 1,
    transform: "none"
  },
  {
    opacity: 0,
    transform: "translateY(-200%)"
  }
], {
  duration: 500,
  easing: "ease-in"
})
.onFinish(() => {
  Snackbar.rootElement.remove();
});

注意这里方法名用了大写F的onFinish避免和原生的onfinish属性重名冲突，如果你一定要用全小写的onfinish作为方法名，可以调整逻辑处理覆盖问题，不过更推荐使用标准的addEventListener写法，不需要额外做扩展兼容。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD