ちょっとした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の実装を説明しているサイトに行きます。
自分の環境で実現できるのであれば、こういった書き方で、ちょっとしたものは、実現して探す時間を他の作業に当てようと思いました。
参考ページ
↧
