CSSのfilterにtransitionを設定したい。

Question

ボタンを押すとボタンの上のテキストにブラーを掛けるフィルターをCSSで設定しています。
再度ボタンを押すとブラーが解けます。
動作サンプル

このフィルターにtransitionを設定する方法をご教示いただけないでしょうか。
現状はフィルターを掛ける要素にtransition: 5s;を設定していますが、transitionが効いてない状態です。

使用しているツール

• React.js
• styled-components

ソースコード

import React, { useState, useEffect } from "react";
import styled from "styled-components";

export default function App() {
  const [blur, setBlur] = useState(false);
  useEffect(() => {
    TextWrap = styled.div`
      transition: 5s;
      filter: blur(${blur ? 0 : "5px"});
    `;
  }, [blur]);

  return (
    <div className="App">
      <TextWrap>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </TextWrap>
      <Button onClick={() => setBlur(!blur)}>button</Button>
    </div>
  );
}

const Button = styled.button`
  width: 200px;
  height: 200px;
  background: red;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  transition: 0.2s;
  &:hover {
    background: blue;
  }
  &:active {
    background: green;
  }
`;

let TextWrap = styled.div``;

transitionが効かない考えられる原因

クリックイベントのsetStateにより再レンダーされ、再レンダーの際にblurのbooleanを判定しブラーを掛けているためかと思われます。
レンダー時にフィルターの挙動が終わっているので、transitionからするとフィルターは動いていないと判断し、trasnitionが効かないのではないかと考えました。

現状の実装の方向でtransitionを付けるとなると、テキスト群のマウント時・アンマウント時にアニメーションを付ける方法が考えられますが、その方向は大げさな気がしています。

現状の実装の方向性にこだわりはなく、私がこの方法しか思いつかなかっただけです。
機能が実現できれば実装方法は問いませんので、よりシンプルに実装できる方法があればご教示ください。

Answer 1

React Hook の state の値をそのまま styled components に渡してあげるといいと思います。
このやり方ですとuseStateで実装できそうだと思いました。
https://styled-components.com/docs/basics#passed-props

またCSSのtransitionプロパティは、アニメーションさせるプロパティ名と時間の指定が必要です。
transition - CSS カスケーディングスタイルシート MDN

サンプルコード

import React, { useState } from "react";
import styled from "styled-components";

export default function App() {
  const [blur, setBlur] = useState(false);

  return (
    <div className="App">
      <TextWrap blur={blur}>
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </TextWrap>
      <Button onClick={() => setBlur(!blur)}>button</Button>
    </div>
  );
}

const Button = styled.button`
  width: 200px;
  height: 200px;
  background: red;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  transition: 0.2s;
  &:hover {
    background: blue;
  }
  &:active {
    background: green;
  }
`;

const TextWrap = styled.div`
  transition: filter 3s ease; // filterプロパティを3秒でアニメーションさせる
  filter: ${props => (props.blur ? "blur(10px)" : "blur(0)")};
`;