使用 Animation API 让页面元素动起来

前天给公司的浏览器插件项目做了个弹出动画，原理是给页面插入 style 标签，包含一段拼接的 CSS 动画，感觉不够优雅，这不一早看了这篇讨论，发现有个新的 Animation API 更好用。

// Before
const styleEl = document.createElement("style");
styleEl.innerHTML = `
  @keyframes panel-animate {
    from {
      opacity: 0;
      transform: translate(${fromLeft}px, ${fromTop}px) scale(0);
    }
    to {
      transform: translate(${toLeft}px, ${toTop}px);
    }
  }

  .has-animate {
    transform-origin: top left;
    animation: panel-animate .5s forwards;
  }
`;

// After
const scaleAni = panel.animate(
  [
    { opacity: 0, transform: `translate(${fromLeft}px, ${fromTop}px) scale(0)` },
    { transform: `translate(${toLeft}px, ${toTop}px)` },
  ],
  { duration: 500 },
);

这样修改完之后可读性更好，有 TS 类型加成，还不需要担心类名冲突等等一系列问题，我打算趁机翻新一下我的方块播放器的相关代码了。

2024-04-19