styled-componentsで作成したアニメーションは内容が同じだとnameも同一になる 📛

styled-componentsで作成したアニメーションは、nameかgetName()で名前が取得できます。

import { keyframes } from 'styled-components';

const fadeIn = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;

console.log(fadeIn.name); // → iHsNqv
console.log(fadeIn.getName()); // → iHsNqv

最近ふと気づきました。
名前が違っても、同じ内容のアニメーションを作ると、全て同じ名前になるということに。

import { keyframes } from 'styled-components';

const fadeInOne = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;

const fadeInTwo = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;

const fadeInThree = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;

console.log(fadeInOne.name); // → iHsNqv
console.log(fadeInTwo.name); // → iHsNqv
console.log(fadeInThree.name); // → iHsNqv
console.log(fadeInOne.getName()); // → iHsNqv
console.log(fadeInTwo.getName()); // → iHsNqv
console.log(fadeInThree.getName()); // → iHsNqv