styled-components로 작성한 애니메이션 적용 문제

[질문이써여]

안녕하세요 선생님!
다름이 아니라 styled-component로 css를 작성하고 있는데요

강의에서는 Tab 클릭시 start, end 클래스로 애니메이션을 제어하는데
저는 아래와 같이 구현했습니다.

 

useEffect로 tab이 변경되면 state값을 true로 변경하여 내용 div들을 감싸고 있는 <TabBox>의 selected에 반영됩니다.



fadeContent라는 애니메이션을 작성하고
props값에 따라 css를 반영하도록 작성했는데요.

문제는 아래와 같습니다.
1. 새로 고침하면 첫 번째 탭은 애니메이션이 제대로 동작함
2. 다른 탭 클릭 시 애니메이션 동작 안 하는데 background-color: yellow; 는 동작함
3. 다른 탭 클릭 시 첫 번째 탭을 선택하면 마찬가지로 애니메이션은 동작 안 하는데 background-color: yellow; 는 동작함


어떻게 해결해야 할 지 몰라서 여쭤봅니다 ㅠㅠ

[codingapple]

else문을 추가해서 opacity : 0 이런 기본 스타일을 줘보거나 합시다

[글쓴이]

글