styled-component에서 keyframes를 만들 때 해당 내용 안에 변수를 사용 가능한가요?

Question

안녕하세요 프론트엔드를 공부하는 학생입니다.react를 가지고 포트폴리오 사이트를 제작 중인데 애니메이션 효과를 넣기위해서 styled-component를 사용하는 프로젝트에서 keyframes를 작성하고 있습니다.// presenter.js function Presenter() { return ( <Animation> ) } // styles.js import { keyframes } from &#34;&#64;emotion/react&#34;; import styled from &#34;&#64;emotion/styled&#34;; const start &#61; keyframes&#96; from { width: 0%; } to { width: 100%; } &#96; const Animation &#61; styled.div&#96; animation: ${start} 1s linear &#96;위와 같은 코드가 있다고 할 때, start의 부분에서 presenter의 변수를 내려받아 width의 to의 가로 길이를 조정하고 싶습니다.props를 내리게 되면 Animation에 내리는 것이 되어서 그 안에서는 사용할 줄 알겠는데 그것을 다시 start로 보내는(?) 방법에 대해서 알고 싶습니다.답변 감사합니다!

몰랑토끼 · Answer

키프레임의 width를 조절하지말고 채워지는 div의 width를 조절하세요

양쓰 · Answer

presenter property 값을 받은 후 애니메이션이 되게 하고 싶다.{props => props.presenter ? `animation ${start} 1s linear` : null}이렇게 되면 이렇게 프로피터값이 있다는 전제하에서 움직이는 코드를 작성 할 수 있겠죠? 보통 사이즈를 프로퍼티에서 수렴받아서 애니메이션을 주고싶다면 개인적으로 transition을 많이 씁니다. 애니메이션 코드량을 안써도되고 전역오염도 줄이고.

styled-component에서 keyframes를 만들 때 해당 내용 안에 변수를 사용 가능한가요?

2개의 답변

#styled-components 목록