React.js CSS 속성을 설정하십시오 (setState와 유사)

Question

React.js에서 CSS를 어떻게 명시 적으로 설정합니까?

나는 전체 높이에서 시작하는 줄이, 다음 (애니메이션을 통해) 축소 높이를 0 픽셀 수있는 모든 방법 :

여기 맥락입니다. 아래 이미지를 참조하십시오.

정확하게 1-2-3 단계에서 작동합니다. 애니메이션을 적용하여 높이를 0으로 설정합니다.

그러나 높이가 이미 0이기 때문에 3 단계에서 4 단계로 전환 할 수 없습니다. 높이가 초기 값 인 1 단계와 달리 3 단계에서 4 단계로 전환 할 수 없습니다. 700px).

어떻게 명시 적으로 CSS를 설정할 수 있습니까? 이렇게하면 초기 700px 높이를 복원 할 수있어 애니메이션을 올바르게 재설정 할 수 있습니다.

참고 : 성능상의 이유로 jQuery를 사용하지 않습니다.

Answer 1

명시 적으로 같은의 componentDidUpdate 및 componentDidMount 방법 및 사업부에 대한 심판을 사용하여 사업부의 CSS 속성을 설정할 수 있습니다 :

endAnimation() { 
    setTimeout(()=>{ 
    this.refs.animatedDiv.className = "newClassToReset" 
    }, this.animationLength); 
}, 
componentDidMout(){ 
    this.endAnimation(); 
}, 
componentDidUpdate(){ 
    this.endAnimation 
} 

을 그러나 당신이 훨씬 더 CSS를 사용하여 애니메이션을 수행하는 경우 공식 ReactCSSTransitionGroups 플러그인을 사용, 여기에서 찾을 : https://facebook.github.io/react/docs/animation.html

당신의 예를 들어이 같은 것, 그것을 설정하는 정말 쉽습니다 :

,549,321 0

이 그런 다음 CSS 파일에 다음과 같은 클래스 제공 : 애니메이션 될 필요가있는 요소에 처음 수축 나타나는 클래스를 추가하여 변환 그룹이 작동

.shrink-appear { 
    height: 700px; 
} 

.shrink-appear.shrink-appear-active { 
    height: 0; 
    transition: height 500ms ease-in; 
} 

방법은을, 다음 추가로 추가 축소 -interactive-active는 우리의 transitionName이 "shrink"이기 때문입니다.

당신은 전환 그룹에 transitionLeaveTimeout을 공급하고 2 개 개의 새로운 클래스를 정의하여, 우리의 예에서 사람들이 될 것이라고 당신이 할 수있는 휴가 애니메이션 수행 할 경우

.shrink-leave { 
    height: 0; 
} 

.shrink-leave.shrink-leave-active { 
    opacity: 700; 
    transition: height 500ms ease-in; 
} 

을 당신이 볼 수있는 Leave 애니메이션 클래스는 우리가 나타나는 애니메이션의 반대 방향에 있으며 반대의 효과를 제공합니다.