justify-content에 transition이 적용되지 않는 문제

문제 발생

• 토글 만들 때 토글의 원을 부드럽게 이동시키기 위해 transition를 사용했지만 transition의 속성 값에 all을 사용했는데도 불구하고 justify-content는 transition이 적용되지 않았다.

 

 

문제 원인

• background-color은 부드럽게 속성 값이 변하는 것으로 보아 props의 문제는 아니다.
• 찾아본 결과 문제는 transition이 justity-content를 지원하지 않기 때문이었다. (https://stackoverflow.com/questions/39080958/applying-transition-on-flexbox-justify-content-property)

Applying transition on flexbox justify-content property

 

 

문제 해결

• justity-content를 사용하지 않고 토글 원에 직접 transform을 사용하여 구현하였다.