styled-componentsでつくったkeyframeアニメーションに変数を渡す 📹

function getZoomIn(zoom: number = 1) {
  return keyframes`
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(${ zoom });
    }
  `;
}

という感じで、変数を受け取ってプロパティに設定したkeyframesを返す関数を作れば、結果として、keyframeアニメーションに変数を渡すことができます。

.single {
  animation: ${ getZoomIn(1) } 1s ease-in-out forwards;
}

.double {
  animation: ${ getZoomIn(1) } 1s ease-in-out forwards;
}

という感じで、手軽に使用することができます。

function ZoomText({
  label,
  zoom = 1
}: {
  label: string;
  zoom?: number;
}) {
  return (
    <Text zoom={ zoom }>{ label }</Text>
  );
}

function getZoomIn(zoom: number = 1) {
  return keyframes`
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(${ zoom });
    }
  `;
}

const Text = styled.div<{ zoom: number }>`
  animation: ${({ zoom }) => getZoomIn(zoom) } 1s ease-in-out forwards;
`;

という感じで、コンポーネントのPropsを渡すようにしても便利です。

一点注意事項として、先日の記事の通り、styled-componentsで作成したアニメーションは内容が同じだとnameが一緒になってしまいます。

blog.kimizuka.org

こちらは、関数を使用しても同じ名前になるので、若干注意が必要な気がします。

function getZoomIn(zoom: number = 1) {
  return keyframes`
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(${ zoom });
    }
  `;
}

console.log(getZoomIn(1).name); // => OQnsT
console.log(getZoomIn(1).name); // => OQnsT
console.log(getZoomIn(2).name); // => iqXUyM
console.log(getZoomIn(2).name); // => iqXUyM