React에서 애니메이션이 적용되지 않는 이유 분석

이 기사에서는 React에서 애니메이션이 적용되지 않는 이유에 대한 분석을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

프로젝트에서 이러한 구성 요소를 만들어야 합니다
다른 값에 따라 파란색 막대의 너비가 달라집니다.
이것은 실제로 매우 간단합니다. 데이터를 기반으로 너비를 동적으로 계산하고 노드를 생성하면 됩니다.
리액트 코드의 일부는 다음과 같습니다

{data && data.length > 0
          ? data.map((item, index) => (
              <p>
                </p><p>
                  <span>{item.name || item.label}</span>
                  <span>{item.value}</span>
                </p>
                <p>
                  <span></span>
                </p>
              
            ))
          : null}

이렇게 하면 위 그림과 같은 함수 표시가 구현될 수 있는데, 이제 요구 사항이 있습니다. 즉, 처음 로드할 때 파란색 막대를 움직여야 한다는 것입니다. .

transition

처음에 CSS의 전환 속성을 생각하고 코드에 추가했습니다

.inner {
        width: 0;
        transition: width 0.6s ease;
      }

그런데 애니메이션이 적용되지 않았습니다.

그런 다음 다시 돌아가서 왜 작동하지 않았는지 생각해 보았습니다.
전환 속성은 너비 속성이 변경될 때만 적용됩니다. 이제 span의 너비가 변경되지 않았다는 것만 보여줄 수 있습니다.
이제 내 코드에 대해 이야기해 보겠습니다. 노드를 렌더링하는 동안 너비가 계산됩니다. 이는 노드가 생성될 때 너비가 이미 설정되었음을 의미합니다. 그러면 당연히 전환이 적용되지 않습니다.

이제 애니메이션이 적용되도록 이 코드를 어떻게 개선할 수 있을까요?

노드를 먼저 생성한 다음 너비를 변경하도록 할 수만 있습니다.
이것은 반응의 ref 속성을 생각나게 합니다. 이 속성은 문자열이나 함수를 허용하며, 이 함수는 노드가 로드된 후 또는 노드가 파괴되기 전에 트리거됩니다. 그런 다음 이 속성에서 반환된 매개변수를 통해 작동할 수 있습니다. 이 노드는 너비를 변경하는데, 이것이 바로 제가 필요한 것입니다.
아이디어가 있으면 코드 개선을 시작해 보세요.

{data && data.length > 0
          ? data.map((item, index) => (
              <p>
                </p><p>
                  <span>{item.name || item.label}</span>
                  <span>{item.value}</span>
                </p>
                <p>
                  <span> {
                      if (n && n.style) {
                        n.style.width = `${getWidth(item.value)}px`;
                      }
                    }}
                  />
                </span></p>
              
            ))
          : null}

그런 다음 브라우저를 열어 결과를 확인했는데 정말 성공했습니다.
효과는 다음과 같습니다.

관련 추천:

js 이미지 업로드 및 압축 방법 구현 방법

React 사용: React가 UI를 렌더링하는 방법

위 내용은 React에서 애니메이션이 적용되지 않는 이유 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!