ReactでWeb Animations APIを使って要素を動かす

import { useRef } from 'react';
import { prefersReducedMotion } from './motion';

const shake: Keyframe[] = [
  { transform: 'translateX(0)' },
  { transform: 'translateX(-8px)' },
  { transform: 'translateX(8px)' },
  { transform: 'translateX(-8px)' },
  { transform: 'translateX(0)' },
];

export function ShakeBox() {
  const boxRef = useRef<HTMLDivElement>(null);
  const animationRef = useRef<Animation | null>(null);

  function handleClick() {
    if (prefersReducedMotion()) return;
    // 前の揺れが残っていれば止めてから、最初から揺らし直す
    animationRef.current?.cancel();
    animationRef.current =
      boxRef.current?.animate(shake, { duration: 400, easing: 'ease-in-out' }) ?? null;
  }

  return (
    <>
      <div ref={boxRef} className="box">入力してください</div>
      <button onClick={handleClick}>送信</button>
    </>
  );
}

押した直後: {"running":1,"created":1,"transform":"matrix(1, 0, 0, 1, 0, 0)","styleAttr":null}
100ms後: {"running":1,"created":1,"transform":"matrix(1, 0, 0, 1, -5.66805, 0)","styleAttr":null}
600ms後: {"running":0,"created":1,"transform":"none","styleAttr":null}

shake-nocancel 3回目の100ms後: {"running":3,"playStates":"running,running,running","transform":"matrix(1, 0, 0, 1, -2.84667, 0)"}
shake 3回目の100ms後: {"running":1,"playStates":"idle,idle,running","transform":"matrix(1, 0, 0, 1, -2.84112, 0)"}

import { useLayoutEffect, useRef } from 'react';
import { prefersReducedMotion } from './motion';

const enter: Keyframe[] = [
  { opacity: 0, transform: 'translateY(-12px)' },
  { opacity: 1, transform: 'translateY(0)' },
];

export function Panel() {
  const panelRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    if (prefersReducedMotion()) return;
    const animation = panelRef.current?.animate(enter, { duration: 300, easing: 'ease-out' });
    return () => animation?.cancel();
  }, []);

  return <div ref={panelRef} className="panel">保存しました</div>;
}

panel-effect クリック {"opacity=0 running=1":50}
panel-effect setTimeout {"opacity=1 running=0":8,"opacity=0 running=1":42}
panel クリック {"opacity=0 running=1":50}
panel setTimeout {"opacity=0 running=1":50}

panel 出した直後: {"running":1,"created":2,"playStates":"idle,running"}
panel-nocleanup 出した直後: {"running":2,"created":2,"playStates":"running,running"}

const animation = box.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(200px)' }],
  { duration: 300, easing: 'ease-out', fill: 'forwards' },
);
await animation.finished;
// 最後の状態を style 属性に書き込み、アニメーションは片付ける
animation.commitStyles();
animation.cancel();

move-none {"running":0,"transform":"none","styleAttr":null}
move-fill {"running":1,"transform":"matrix(1, 0, 0, 1, 200, 0)","styleAttr":null}
move-commit {"running":0,"transform":"matrix(1, 0, 0, 1, 200, 0)","styleAttr":"transform: translateX(200px);"}

shake-fill 終わったあと: {"running":1,"replaceStates":"removed,removed,active"}

import { useRef, useState } from 'react';
import { prefersReducedMotion } from './motion';

const exit: Keyframe[] = [
  { opacity: 1, transform: 'translateX(0)' },
  { opacity: 0, transform: 'translateX(24px)' },
];

function Notice({ onClose }: { onClose: () => void }) {
  const noticeRef = useRef<HTMLDivElement>(null);
  const closingRef = useRef(false);

  async function handleClose() {
    const notice = noticeRef.current;
    if (!notice || closingRef.current) return;
    closingRef.current = true;
    if (!prefersReducedMotion()) {
      // 消えた状態のまま残すため fill: 'forwards' を付ける
      const animation = notice.animate(exit, { duration: 250, easing: 'ease-in', fill: 'forwards' });
      await animation.finished;
    }
    onClose();
  }

  return (
    <div ref={noticeRef} className="notice">
      保存しました
      <button onClick={handleClose}>閉じる</button>
    </div>
  );
}

export function NoticeArea() {
  const [open, setOpen] = useState(true);
  return (
    <>
      <button onClick={() => setOpen(true)}>通知を出す</button>
      {open && <Notice onClose={() => setOpen(false)} />}
    </>
  );
}

2回押した直後: 作られたアニメーション 1
500ms後: 通知 0 個

notice-nofill 1回目の記録: 1.00 1.00 1.00 1.00 0.99 0.97 0.94 0.90 0.84 0.79 0.72 0.65 0.57 0.49 0.40 0.31 0.21 0.11 1.00 なし
notice 1回目の記録: 1.00 1.00 1.00 1.00 1.00 0.99 0.97 0.94 0.89 0.84 0.78 0.72 0.65 0.57 0.49 0.40 0.31 0.21 0.11 0.00 0.00 なし

// 動きを減らす設定がオンなら true
export function prefersReducedMotion() {
  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}

matchMedia: true
shake 押した直後: {"running":0,"created":0}
notice 閉じた直後: 0 個 / 作られたアニメーション 0