ReactでCSSアニメーションを使ったときに初期レンダー時にアニメが発動してしまう問題

Question

実現したいこと

以下のようなReactアプリを作成したいです。

• 縦横300ピクセルの正方形の中に横長の長方形が表示される。（長方形の高さは48ピクセルで、色は黒)
• 長方形の中心と正方形の中心は一致する。（この場合、中心とは各図形の対角線の交点を意味します）
• 初期表示のとき、長方形の長いほうの辺は水平方向の向き
• 正方形のどこかをクリックすると、長方形は中心の周りに時計回りで90度回転する
• もう一度、正方形のどこかをクリックすると、長方形は中心の周りに反時計回りで90度回転して元の水平の向きに戻る。
• 以後、正方形のどこかをクリックすると上記を交互に繰り返す。
• 長方形は回転する間に以下のようなアニメーションをする。アニメーション全体の時間を1.5秒とする。
  • 正方形がクリックされたと同時に長方形の色は赤に変わる。
  • 赤に変わってから90度回転する。回転に要する時間をアニメ全体の時間の70%とする。
  • 回転が完了してから残りの30%の時間を使って長方形の色を赤から黒に戻す。

発生している問題・分からないこと

• 以下のコマンド

npx create-react-app@latest sample-app --template typescript

で、sample-app というアプリを作った後、sample-app/src/App.tsx を修正していきました。

• 現状では「該当のソースコード」のものになっており、ほぼ出来ているのですが一点問題があります。

• 問題は、以下の動画のようにブラウザをリロードさせると横棒が初期表示の水平方向に置かれた状態に収まるまでにアニメーションしてしまうことです。

• 現状では上の画像のように初期表示のときにアニメーションが発生しますが、これを抑止して初めから水平方向に黒い棒が表示されるようになる修正方法を調べていますが分かっていません。

• ご教示いただきたいのは以下の2点です。

  • (1) なぜ初期表示のときにアニメーションが発生してしまうのか
  • (2) どのように修正すると初期表示のときのアニメーションを抑止できるのか

よろしくお願いいたします。

該当のソースコード

import { PropsWithChildren, useState } from 'react'

type Position = 'absolute' | 'relative'
type Direction = 'horizontal' | 'vertical'

const anotherDirection: Record<Direction, Direction> = {
  horizontal: 'vertical',
  vertical: 'horizontal'
} as const

const spanStyleBase = {
  width: '100%',
  height: '48px',
  display: 'inline-block',
  position: 'absolute' as Position,
  transform: 'translate(0, -50%)',
  top: '50%',
  backgroundColor: 'black',

  /* animation settings */
  animationDuration: '1.5s',
  animationFillMode: 'forwards',
  animationDirection: 'normal'
}

const divStyle = {
  width: 300,
  height: 300,
  position: 'relative' as Position,
  cursor: 'pointer',
  backgroundColor: '#eee'
}

const cssKeyframes = `

  @keyframes rotate-to-vertical {
    0% {
      background-color: red;
      transform: translate(0, -50%) rotate(90deg);
    }
    70% { background-color: red; }
    100% { background-color: black; }
  }
  
  @keyframes rotate-to-horizontal {
    0% { background-color: red; } 
    70% {
      background-color: red;
      transform: translate(0, -50%) rotate(90deg);
    }
    100% {
      background-color: black;
      transform: translate(0, -50%) rotate(90deg);
    }
  }
`

const RotatableLine = ({ direction, onClick }: { direction: Direction; onClick: () => void }) => {
  const spanStyle = {
    ...spanStyleBase,
    animationName: `rotate-to-${anotherDirection[direction]}`
  }
  return (
    <div style={divStyle} onClick={onClick}>
      <span style={spanStyle} />
    </div>
  )
}

const Container = ({ children }: PropsWithChildren) =>
   <div style={{ display: 'flex', justifyContent: 'center', marginTop: 50 }}>{children}</div>


export default function App() {
  const [direction, setDirection] = useState<Direction>('horizontal')

  const handleToggleDirection = () => {
    setDirection((state) => anotherDirection[state])
  }

  return (
    <Container>
      <style>{cssKeyframes}</style>
      <RotatableLine direction={direction} onClick={handleToggleDirection} />
    </Container>
  )
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

調べましたが分かりませんでした。

補足

特になし

Comments

[juner]

そのコードを見た限り、 最初から animationName を指定している様に見えるのですが、これは意図しているのでしょうか？（設定されていれば初期状態からアニメーションしませんでしょうか？

[退会済みユーザー]

コメントありがとうございます。
はい。
> 最初から animationName を指定して
いますが、これによって初期表示のときもアニメーションされるという理解ができておりませんでした。
つまり「現状のコードで初期表示ではアニメーションされないだろう」という思い込みがあり、それは多分、cssによるanimation 設定の基本知識の何かが足りてないせいだと思うのですが、その何かが何なのかが分かっていない気がしています。
ですので「ＭＤＮのこのへんちゃんと読め」的なご指摘でもありがたいです。

Answer 1

css の animation-name property は 設定した段階でそのアニメーションが再生される為、この 場合初期表示時点でそれが実施されるものと思われます。

https://developer.mozilla.org/ja/docs/Web/CSS/animation-name

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animations/Using_CSS_animations

もしも要素のアニメーションをjsで動的にやりたい場合は class の追加・削除等で css の animation-name を設定する他に Element#animate() を使う方法もあります。

https://developer.mozilla.org/ja/docs/Web/API/Element/animate

https://developer.mozilla.org/ja/docs/Web/API/Web_Animations_API

以上。

追伸:
参考まで css animation と js animation(Web Animation API) の比較サンプルを追記しておきます。

playground

<div class="css">
  <h1>css</h1>
  <h2>表示時</h2>
  <div class="target case-1"></div>
  <h2>hover時</h2>
  <div class="target case-2"></div>
  <h2>click時</h2>
  <div class="target case-3"></div>
</div>
<div class="js">
  <h1>js</h1>
  <h2>表示時</h2>
  <div class="target case-1"></div>
  <h2>hover時</h2>
  <div class="target case-2"></div>
  <h2>click時</h2>
  <div class="target case-3"></div>
</div>
<script type=module>
  const keyframes = [
      { transform: 'rotate(0)'},
      { transform: 'rotate(1turn)'},
  ];
  const options = {
    duration: 1000,
    iterations: Infinity,
  };
  const onetime = {
    duration: 1000,
    iterations: 1,
  };
  {
    // js 表示時
    const target = document.querySelector(".js .target.case-1");
    target.classList.add('animate');
    target.animate(keyframes, options);
  }
  {
    // js hover時
    let controller = new AbortController();
    const target = document.querySelector(".js .target.case-2");
    target.addEventListener('pointerover', (e) => {
      const target = e.currentTarget;
      target.setPointerCapture(e.pointerId);
      target.classList.add('animate');
      const animate = target.animate(keyframes, options);
      const signal = controller.signal;
      signal.addEventListener('abort', () => {
        target.classList.remove('animate');
        animate.cancel();
      })
    });
    target.addEventListener('pointerout', (e) => {
      controller.abort();
      controller = new AbortController();
    });
  }
  {
    // js click時
    let controller = new AbortController();
    const target = document.querySelector(".js .target.case-3");
    target.addEventListener('pointerup', async (e) => {
      const target = e.currentTarget;

      // 前をキャンセル
      controller.abort();
      const c = new AbortController();
      controller = c;

      const animate = target.animate(keyframes, onetime);
      const signal = c.signal;
      // キャンセルすると状態をクリアする
      signal.addEventListener('abort', () => {
        target.classList.remove('animate');
        if (animate.playState === "finished") return;
        animate.cancel();
      });
      target.classList.add('animate');
      try {
      await animate.finished;
      }catch(e){ }
      // 完了したので状態をクリアする
      c.abort();
    });
  }
  {
    // css click時
    let controller = new AbortController();
    const target = document.querySelector(".css .target.case-3");
    let promise = Promise.resolve();
    let i = 0;
    target.addEventListener('pointerup', (e) => {
      const target = e.currentTarget;
      
      // 前をキャンセル
      controller.abort();
      const c = new AbortController();
      controller = c;

      // シーケンシャルに実行しないと タイミングに問題が出る
      promise = promise.then(async () => {
        target.classList.add('animate');
        const signal = c.signal;
        
        // キャンセル時は class を外すだけ
        signal.addEventListener('abort', () => {
          target.classList.remove('animate');
        });

        const deferred = (() => {
          let resolve,reject;
          const promise = new Promise((res, rej) => [resolve, reject] = [res,rej]);
          return {resolve, reject, promise};
        })();

        // animationend / animationcancel どちらかが発生するまで待機
        target.addEventListener('animationend', deferred.resolve);
        target.addEventListener('animationcancel', deferred.resolve);
        await deferred.promise;

        // キャンセルしていなければ キャンセル
        if (!signal.aborted) c.abort();
        // イベントの解放
        target.removeEventListener('animationend', deferred.resolve);
        target.removeEventListener('animationcancel', deferred.resolve);
      });
    });
  }
</script>
<style>
  :root {
    --animate-color: red;
    .target {
      height: 100px;
      width: 100px;
      display:inline-block;
      background-color: green;
    }
    .js {
      .animate {
        background: var(--animate-color);
      }
    }
    .css {
      /* css 常時 */
      .case-1 {
        background: var(--animate-color);
        animation: linear 1000ms infinite normal rotate;
      }
      /* css hover時 */
      .case-2:hover {
        background: var(--animate-color);
        animation: linear 1000ms infinite normal rotate;
      }
      .case-3.animate {
        background: var(--animate-color);
        animation: linear 1000ms 1 normal rotate;
      }
    }
  }
  @keyframes rotate {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(1turn);
    }
  }
</style>
<style>
  /* あまり関係ないその他のスタイル */
  :root {
    body {
      display:grid;
      grid-template-columns: min-content min-content;
      grid-auto-flow: row;
      gap: 20px;
    }
    .js, .css {
      display: grid;
      grid-auto-flow: row;
      grid-row: 1 / -1;
    }
    .js {
      grid-column: 1;
      & > * {
        grid-column: 1;
      }
    }
    .css {
      grid-column: 2;
      & > * {
        grid-column: 2;
      }
    }
  }
</style>

Comments

[退会済みユーザー]

ありがとうございます。ご提示のMDNのページを熟読して出直します。