styled-components で CSS Animation を再度実行する

CSS Animation はレンダリング時の一回にしか実行されないが、任意のタイミングで再実行したいことがある。

解決策

useState を用いて animation を管理する。一度外し、setTimeout で 1 ミリ秒に再度付与すればOK。css を使わないと怒られる点に注意する。

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

const fadeIn = keyframes`
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
`;

const Content = styled.div<{ isEnabledAnimation: boolean }>`
  ${(props) => (props.isEnabledAnimation && css`${fadeIn} 1s;`)}
`;

const Components = () => {
  const [isEnabledAnimation, setEnabledAnimation] = useState(true);
  const restartAnimation = () => {
    setEnabledAnimation(false);
    setTimeout(() => setEnabledAnimation(true), 1);
  };

  return (
    <Content isEnabledAnimation={isEnabledAnimation}/>
  );
};