ちょっとしたReactでのアニメーション

※この記事は、ガッツリすごいアニメーションをやるものでは、ありません！
TypeScriptでReactなどWebフロントを実装している際、ちょっとした変化を持たせたいなと思って書きました。

ちょっとした変化

• 文字の色を変えたい
• 変位をゆっくりしたい
• 見た目の変化

HTML、CSSは、インターネットが始まって成長してきた言語です。
非常に簡単に書くことができる。
なので、色んな人が、様々な技巧でWebサイトを面白く、美しく見せてきました。
React、Vue などフレームワークが変わっても土台は、変わっていません。

React で実装してみよう

細かいことは、置いといてどうやるのか？

import React, { useState } from "react";
import { css } from "emotion";
// css in js

export function Animation() {
  const [isFlag, setFlag] = useState(true);

  const color = isFlag ? "red" : "blue";
  const size = isFlag ? "100px" : "300px";
  const textcolor = isFlag ? "Black" : "White";

  const animation_style = css({
    width: size,
    backgroundColor: color,
    transition: "1s",
    color: textcolor,
  });

  return (
    <div className={animation_style}>
      <p>test</p>
      <button onClick={() => setFlag(!isFlag)}>Change</button>
    </div>
  );
}

上記のコードで、実行するとボタンを押すとサイズが変化する。その変化は、1秒で行われます。

transition 

この要素は、変化にかかる時間を指定しています。
CSS in JSでは、変数を組み込むことができるので、
CSSに変数を組み込んでboolなどで要素の状態を制御しています。

あとがき

この書き方は、一般的なのかどうかは、知りません。
自分の考える動きを起こせるアニメーションのライブラリを探す過程で、よく先人のCSSの実装を説明しているサイトに行きます。

自分の環境で実現できるのであれば、こういった書き方で、ちょっとしたものは、実現して探す時間を他の作業に当てようと思いました。

参考ページ