React-Transition Group을 사용하여 React에서 엄격한 전환 애니메이션을 구현하는 방법은 무엇입니까?

원활한 스위칭 애니메이션을 달성하기 위해 React에서 react-transition-group 사용하십시오

React Development에서 react-transition-group 구성 요소간에 애니메이션 전환을 구현하기위한 일반적인 라이브러리입니다. 그러나 실제 애플리케이션에서 개발자는 종종 구성 요소 전환시 빈 영역과 같이 애니메이션 효과가 이상적이지 않은 상황에 직면하여 애니메이션이 충분히 부드러워지지 않습니다. 이 기사는이 문제를 분석하고 솔루션을 제공합니다.

문제 설명 : 목표는 오른쪽에서 왼쪽으로 미끄러지는 구성 요소 스위칭 애니메이션을 실현하여 두 구성 요소를 애니메이션 프로세스 중에 간격없이 밀접하게 연결해야합니다. 그러나 실제 효과는 구성 요소 사이에 빈 공간이 있다는 것입니다.

질문 코드 예 :

<switchtransition>
  <csstransition classnames="checkout" key="{this.state.isPhone}" timeout="{500}">
    {this.state.isphone? (
      <phone handleback="{()"> this.setphonestate (false)} handlephoneclick = {this.handlephoneclick} />
    ) : (
      <main handlephoneclick="{this.handlePhoneClick}"></main>
    )}
  </phone></csstransition>
</switchtransition>

해당 CSS 스타일 :

 .checkout-enter {
  변환 : TranslateX (100%);
}
.Checkout-Enter-Active {
  변환 : translatex (0);
  전환 : 모든 500ms;
}

.checkout-exit {
  변환 : translatex (0);
}
.Checkout-Exit-Active {
  변환 : translatex (-100%);
  전환 : 모든 500ms;
}

문제 분석 : 위의 CSS 코드는 애니메이션의 입력 효과를 정의하지만 애니메이션 프로세스 중에 구성 요소의 위치 관계를 고려하지 않으므로 구성 요소 간의 간격이 발생합니다.

솔루션 : 키는 position: absolute 속성을 사용하고 애니메이션 프로세스 중에 구성 요소의 위치를 ​​정확하게 제어하는 ​​것입니다.

수정 된 CSS 스타일 :

 .checkout-enter {
  위치 : 절대;
  오른쪽 : 0;
  변환 : TranslateX (100%);
}
.Checkout-Enter-Active {
  변환 : translatex (0);
  전환 : 모든 500ms;
}

.checkout-exit {
  위치 : 절대;
  왼쪽 : 0;
  변환 : translatex (0);
}
.Checkout-Exit-Active {
  변환 : translatex (-100%);
  전환 : 모든 500ms;
}

position: absolute 및 컨테이너의 오른쪽과 왼쪽에 각각 수신 및 종료 구성 요소를 배치하면 애니메이션 프로세스 중에 구성 요소가 항상 밀접하게 연결되어 빈 영역을 제거하고 애니메이션 효과를 원활하게 전환해야합니다. 이렇게하면 애니메이션이 더 부드럽고 사용자가 더 잘 경험할 수 있습니다.

위 내용은 React-Transition Group을 사용하여 React에서 엄격한 전환 애니메이션을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!