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

2024-04-19

前天给公司的浏览器插件项目做了个弹出动画,原理是给页面插入 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 类型加成,还不需要担心类名冲突等等一系列问题,我打算趁机翻新一下我的 方块播放器 的相关代码了。

小雨 一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君