【Gatsby】twin.macroでアニメーション

twin.macroでアニメーションする

import React,{useState} from 'react'
import tw,{ styled, css } from "twin.macro"


const Title2 = styled.h1(({ bool, rotate }) => [
    tw`text-3xl font-bold bg-red-500 transition`, // 基本のスタイル
    bool && tw`text-4xl`, // 変数boolがtrueになると、text-3xl -> text-4xlになる
    rotate > 0 &&
      css`
        transform: rotate(${rotate}deg);
      `, // 変数rotateに数を入れると、${rotate}度回転する
]);

const Title3 = styled.div(({bool}) =>[
  tw`text-3xl font-bold bg-red-400 transition`,
  bool ? css`transform: rotate(45deg);` : css`transform: rotate(0);` //45度回転したり戻ったりする
])


const AboutPage = () => {
  const [bool,setBool ] = useState(false)
  const [rotate,setRotate] = useState(0)
  return (
    <Layout tw="w-4/5" pageTitle="About Me">
      <p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
      <Title2 bool={bool} rotate={ro} >わきげ</Title2>
      <Title4 bool={bool} >わきげ</Title2>
      <button tw="w-10 h-10 " onClick={()=>setRotate(rotate+45)} >わきげ</button>
      <button tw="w-10 h-10 " onClick={()=>setBool(!bool)} >わきげ</button>
    </Layout>
  )
}

export default AboutPage