みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

ちなみにidも同じになります。

animationEnd で、完了したアニメーションをanimation.nameで判定しようとした際にこの仕様に気づきました。

developer.mozilla.org


追記

こちら、keyframesを返す関数を作っても、同様の結果になりました。

blog.kimizuka.org