Chrome에서 페이지 로드 시 CSS 전환이 트리거되는 것을 방지하는 방법은 무엇입니까?

페이지 로드 시 CSS 전환 시작 억제

어떤 상황에서는 페이지 로드 중에 CSS 전환이 실수로 활성화되어 요소가 깜박일 수 있습니다. 이 문제는 요소에 색상 전환을 적용할 때 발생할 수 있습니다.

제공된 예에 따라:

CSS:

p.green {
   color: green;
   transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML:

<p class="green">The Flashing Text</p>

페이지 로드 시

요소가 검정색(초기 색상)에서 녹색으로 전환됩니다. 이러한 동작은 원하지 않으며 시각적으로 방해가 될 수 있습니다.

이러한 의도하지 않은 전환을 방지하려면 Chrome 동작의 고유한 측면을 활용하는 솔루션이 필요합니다. 페이지에

요소가 있으면 Chrome이 CSS 전환을 조기에 트리거합니다. 스크립트 태그 내에 단일 공백 ​​문자를 추가하면 이 요소의 존재를 에뮬레이트할 수 있으므로 잘못된 전환을 억제할 수 있습니다.

<script> </script>

이 간단한 해결 방법은 공백 < 형태> 요소를 사용하여 페이지 로드 중 불필요한 전환 시작을 방지합니다.

위 내용은 Chrome에서 페이지 로드 시 CSS 전환이 트리거되는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!