React で @keyframes を使ってみた

はじめに

@keyframes は、アニメーションの開始から終了までの中間地点を制御する事が可能です。
ReactでもCSSファイルは利用できるので、CSSファイルに記述することで実装できますが、コンポーネントファイル内のstyle変数に含めて記述できないか？ということで今回トライしてみました。

今回作成するもの

今回は、React スターターキットの create-react-app で登場するReactロゴがグルグル回るアニメーションを作成します。
(codepenのリンクに完成版貼っていますが、ここではテキスト回しています。笑）
create-react-app では、CSSファイルに @keyframes を書いて動かしています。

See the Pen React keyframes by mineyuji (@mineyuji) on CodePen.

React で @keyframes を使う

個人的にReactで開発を行う場合、JSファイルのみで書きたいけれど、細かいアニメーションや、擬似クラスの書き方を学ぶついでに今回は、 @keyframes を例にした@-規則のCSS文に挑戦してみました。

擬似クラスhoverの場合

:hover などの擬似クラスの場合は、以下のように'(シングルコーテーション)で囲むことで書く事ができます。

indes.js

const styles = {(
  root: {
    color: '#f00',
　　'&:hover': {
　　　　color: '#00f',
   },
  },
)};

styles 変数内に綺麗に書けます！　

@-規則 @keyframesの場合

今回、 @keyframes に挑戦しようと色々調べてみたのですが、なかなかクールな書き方が見つけられず、結局以下の形で落ち着きました。

index.js

const Spin = (
  <style>
    {`
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    `}
  </style>
);

const styles = ({
  div: {
    height: '100vh',
    position: 'relative',
  },
  h1: {
    (...省略 詳細は、codepenに！)
    animation: "spin infinite 20s linear",
  },
});

render の中に Spin を埋め込むことで、スタイルファイルを読み込ませました。
挙動的には正しく動かすことができました。

やってみて

書き方的にクールではないなといった感じです。
ベットで、スタイル要素を render 内に記述するのは...ちょっと。
できれば、styles にまとめて書きたいです。苦戦しました。

さいごに

今回は、実現する といったところまでの内容でしたが、どこかで綺麗な書き方に出会ったらまたアップデートしたいと思います。
「綺麗な書き方あるよ！」といった方いましたらぜひ！教えていただけると嬉しいです。涙