토글 속성을 사용할 때 CSS 전환을 유지할 수 있나요?

Question

<p>왼쪽에서 오른쪽으로 이동하는 div가 있습니다. 항상 화면에 표시하고 창 크기를 조정할 때 정렬되지 않도록 하려면 화면의 어느 쪽이 가장 가까운지에 따라 왼쪽과 오른쪽의 사용을 전환합니다.
원활하게 작동하지만 방향이 왼쪽에서 오른쪽으로 또는 그 반대로 전환되자마자 전환이 없고 div가 즉시 이동합니다. <br /><br />왼쪽과 오른쪽 사용 간에 전환할 때에도 가지고 있는 CSS 전환(또는 갖고 있지 않은 유사한 CSS 전환)을 어떻게 유지하나요?<br /><br / >자바스크립트에 다음 함수가 있습니다:</p><p><br /></p> <pre class="brush:php;toolbar:false;">function moveTimeline(screenIndex) { // 창 크기 조정으로 인해 변수가 될 수 있음 let timelineSectionWidth = (TIMELINE_BACKGROUND_WIDTH - documentElement.clientWidth) / num_timelinePieces; // div가 어느 면에 연결되어야 하는지 확인합니다. let isOnLeftSide = (screenIndex < num_timelinePieces / 2); //인덱스가 오른쪽에 있으면 반전 if (!isOnLeftSide) screenIndex = screenIndex - num_timelinePieces; // 새로운 픽셀 위치를 계산합니다. let new_timelinePosition = Math.floor(screenIndex * timelineSectionWidth); // 방해하지 않도록 사용하지 않는 속성을 설정 해제합니다. if (isOnLeftSide) { 타임라인Background.css({ "왼쪽": "-" + new_timelinePosition + "px", "오른쪽": "자동" }); } 또 다른 { 타임라인Background.css({ "왼쪽": "자동", "오른쪽": (new_timelinePosition) + "px" }); } }</pre> <p>CSS의 속성은 다음과 같습니다.</p> <pre class="brush:php;toolbar:false;">전환: 왼쪽 1은 이즈, 오른쪽 1은 이즈;</pre> <p>자동 조종되는 속성을 전환하는 경우에도 div가 왼쪽에서 오른쪽으로 계속 원활하게 이동하기를 원하지만 이로 인해 작업이 종료되지는 않습니다. 여기에서 어떻게 가는지 잘 모르겠습니다. 창 크기가 조정되고 div를 단계별로 수동으로 이동하는 것이 절대 최후의 수단인 경우 div의 위치가 엉망이 될 수 있으므로 단일 속성을 사용하지 않는 것이 좋습니다. </p>

Answer 1

오른쪽에서 왼쪽으로 전환할 때 전환이 빠르게 반대편으로 이동하는 것처럼 보이는 이유는 왼쪽과 오른쪽을 자동 값으로 설정했기 때문입니다. CSS 전환(또는 일반적인 CSS 애니메이션)은 자동 값이 있는 props에서 작동하지 않습니다.

이 문서는 CSS 전환 사용:

아마도 왼쪽/오른쪽 CSS 소품 대신에translateX() 함수와 함께 CSS 속성을 사용하는 것이 더 나을 것입니다. 그렇게 하면 신뢰할 수 있는 단일 CSS 값을 얻을 수 있습니다. 변환하고 성능을 향상시킵니다.

코드는 다음과 같습니다.

으아악

CSS 전환은 다음과 같습니다:

으아악

H 유용할 것 같아요