React JS transition을 가진 변경 클래스

Question

ReactJS로 웹 사이트를 만들고 있습니다. 내 페이지에는 콘텐츠 섹션과 사이드 바가 있습니다.

버튼을 클릭하면 사이드 바를 전환해야합니다. 지금은 부트 스트랩에서 콘텐츠 클래스를 col-md-9에서 col-md-12으로 변경하고 속성 hidden을 사이드 바에 설정합니다.

하지만 이제는 사이드 바를 페이드 인하거나 페이드 아웃하는 것과 같은 전환을 추가하여 콘텐츠의 크기를 늘리고 싶습니다. 클래스를 변경하기 때문에 이러한 전환을 어떻게 추가 할 수 있는지 잘 모르겠습니다.

내가해야 할 일을 말해 줄 수 있습니까?

Answer 1

CSS를 사용할 수 있습니다. 당신은 클래스를 변경하여 CSS 전환을 사용할 수 있습니다 animate.css

https://daneden.github.io/animate.css/

Answer 2

를 살펴 보자. 여기에 페이드 애니메이션을 할 것 두 clsses의 예입니다 : 그것은 none 값으로 display 속성을 설정 있기 때문에, hidden 부트 스트랩 클래스 이름과 함께 작동하지 않을 것입니다 그러나

.fade-in { 
    opacity: 0; 
    transition: opacity 400ms; 
} 


.fade-out { 
    opacity: 1; 
    transition: opacity 400ms; 
} 

. 작동 시키려면 hidden 및 fade-out 대신 fade-in 클래스 이름을 사용할 수 있습니다. 측면 네비게이션이 표시 될 때