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で判定しようとした際にこの仕様に気づきました。