当サイトは、アフィリエイト広告を利用しています

【React × Emotion】transitionの使い方

作成日：2022月04月09日
更新日：2022年09月19日

emotionでtransitionを使ってみる
Emotionの基本的な使い方は下記記事で紹介してます

transitionとは？

cssにtransitionを設定することでcssの切り替えによる画面項目の変化を
アニメーション的にすることができる。

基本の書き方

transitionでは4つのプロパティを設定する

transition-property

アニメーションを適用するプロパティを設定する。
下記の場合、hover時に

  • color
  • background-color

が変化するが「transition-property: background」としているため
アニメーションはbackground-colorにしか適応されない。
全てに適応した場合ばallにする

transition-duration

アニメーション開始から終了までの時間を設定する。
長く設定すると全然終わらない...

transition-delay

アニメーション開始までの時間

transition-timing-function

アニメーションが開始され終了するまでにおける変化の進行度合い

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear

などがある。
transition-timing-function

実装サンプル

transitionを使ったサンプルを実装してみる

hover時のアニメーションを設定

App.js
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";


export default function App() {
  return (
    <div css={[container]}>
      <button css={[tag]}>サンプル</button>
    </div>
  );
}


const tag = () => [
  css`
    background-color: skyblue;
    /* transitionの設定 */
    transition-property: background;
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: ease-in;


    /* hover時の設定 */
    &:hover {
      background-color: darkblue;
      color: white;
    }
  `
];


const container = ()=>[
  css`
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
  `
]

transitionでは:hoverや:activeなどのトリガーが必要になる。 逆にいうとhoverなどによって画面項目のデザインが変化するまでの間を
transitionで設定するようなイメージ。

ice video 20220410-010410

transformと組み合わせて見る

transformと組み合わせることもできる

App.js
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";


export default function App() {
  return (
    <div css={[container]}>
      <button css={[tag]}>サンプル</button>
    </div>
  );
}


const tag = () => [
  css`
    background-color: transform;
    /* transitionの設定 */
    transition-property: transform;
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: ease-in;


    /* hover時の設定 */
    &:hover {
      /* 縮小する */
      transform:scale(0.5);
    }
  `
];


const container = () => [
  css`
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  `
];
  • transitionは変更前に書く
  • transformは変更後に書く

ice video 20220410-011403

省略した書き方

transition:~で一括で4つのプロパティを設定することができる。
左から

  • transition-property
  • transition-duration
  • transition-delay
  • transition-timing-function 　

で設定する

App.js
const tag = () => [
  css`
    background-color: skyblue;
    /* transitionの設定(省略形) */
    transition:background 1s 0s ease-in;
    /* hover時の設定 */
    &:hover {
      background-color: darkblue;
      color: white;
    }
  `
];

参考

手軽なCSSアニメーション！transitionプロパティの使い方（基礎編）

新着記事

タグ別一覧
top