[html] 페이지로드시 CSS 전환 실행 중지

Program / 글쓴이

transition페이지로드시 실행 되는 CSS 속성에 문제가 있습니다.

문제는 color transition요소에 a 를 적용 할 때 (예 🙂 transition: color .2s페이지가 처음로드 될 때 요소가 검은 색에서 자체 할당 된 색상으로 깜박이는 것입니다.

다음 코드가 있다고 가정합니다.

CSS

p.green {
   color: green;
   transition: color .2s;
   -moz-transition: color .2s;
   -webkit-transition: color .2s;
   -o-transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>
    <p class="green">The Flashing Text</p>
</body>
</html>

페이지로드에서 내 p.green에서 사라질 것이다 black에 green.

onMouseLeave:hover 전환을 적용하지 않으므로 의사 클래스에 색상 전환을 적용하고 싶지 않습니다 .

웹 페이지에서 텍스트가 깜박이는 것이 정말 짜증나 지 않습니다. 지금까지 저는 전환이 정말로 필요하지 않는 한 전환 사용을 피해 왔으며 심지어 신중하게 사용합니다. 내가 보지 못하는 이것에 대한 확실한 해결책이 있다면 좋을 것입니다!

이것은 Google 크롬에서 발생합니다. 다른 브라우저에서는 테스트하지 않았습니다.

jsfiddle.net/ShyZp/2 ( @Shmiddty에게 감사드립니다)

답변

페이지에 요소가 포함 된 경우 CSS 전환이 실행되는 Chrome 버그 가 있습니다 <form>.

한 가지 간단한 수정 사항은 페이지 바닥 글에 단일 공백이 포함 된 스크립트 태그를 추가하는 것입니다.

<script> </script>

https://crbug.com/332189 및 https://crbug.com/167083 에서 버그를 추적 할 수 있습니다 .

답변

이 질문에 대한 @Shmiddty 의견은 생각을 떠났기 때문에 코드를 가지고 놀면서 해결책을 찾았습니다.

문제는 header선언에 있습니다. CSS와 JS 외부 파일 호출의 순서를 반대로하면 (예 : CSS를 JS 앞에 놓음) 페이지로드시 색상 전환이 중지됩니다.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>

내 생각 엔 JS로드로 인해 DOM이 준비된 후 CSS로드가 지연되고있었습니다. 그 무렵 (@Shmiddty가 제안한대로) 텍스트는 이미 기본 브라우저 색상으로 할당되었으며 CSS transition선언을 사용하여 스타일이 지정된 색상으로 페이드됩니다.

** 여전히 이것이 가장 적절한 방법인지는 모르겠지만 작동합니다. 누구든지 더 나은 솔루션을 가지고 있다면 자유롭게 추가하거나 편집하십시오.

답변

CSS에 추가 :

.css-transitions-only-after-page-load * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

그리고 전역 JavaScript 파일에 몇 가지 코드를 추가합니다.

$(document).ready(function () {
    $(".css-transitions-only-after-page-load").each(function (index, element) {
        setTimeout(function () { $(element).removeClass("css-transitions-only-after-page-load") }, 10);
    });
});

이제 css-transitions-only-after-page-load 클래스 로 페이지의 모든 요소를 ​​표시 할 수 있습니다 .

<div class="container css-transitions-only-after-page-load">
...
</div>

답변

받아 들여진 대답은 나를 위해 속임수를 쓰지 않았습니다. 페이지에 스크립트를 추가하기 만하면 피할 수있는 Google 크롬 의 버그 가 있습니다 . 빈 스크립트도 문제를 해결합니다.

답변

이 문제를 해결하는 가장 좋은 방법은 <script>이 페이지의 답변에 있는 단일 공백, 빈 수정 사항 을 사용하는 것 입니다. 그러나 나는이 문제를 해결하는 두 가지 다른 방법을 찾았습니다.

  1. <style>HTML 파일 헤더의 태그 안에 문제가되는 요소의 CSS를 배치 합니다. 이 버그는 CSS가 외부 스타일 시트에서 호출 될 때만 발생합니다.
  2. 문제가되는 요소를 flexbox컨테이너에 넣습니다. 이것은 버그도 수정합니다.

답변

nienn 은 솔루션을 게시합니다 . 문제는 문서 헤드와 스타일 시트를로드하는 위치 / 방법에 있습니다. HTML / CSS / webkit에서 오류가 발생하지 않는다는 점을 제외하면 PHP의 “헤더를 수정할 수 없습니다. 이미 전송되었습니다”와 비슷합니다.

나는이 정확한 문제를 겪고 있었고 nienn의 게시물을 읽고 내 머리를 검토했습니다. 이전에 내 내용은 다음과 같습니다.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <title>My title</title>
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
</head>

JS를로드하지 않고 제목을 지정한 후 스타일 시트 페이지를로드하는 방법도 확인합니다. 스타일 시트 참조를 ‘뒤로’로 이동 한 후 매력처럼 작동했습니다. 최종 결과는 다음과 같습니다.

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <html lang="en">
    <meta name="description" content="A website for me to do whatever I want with." >
    <link rel="stylesheet" type="text/css" href="/mD/media/foot.css">
    <link rel="stylesheet" href="mD/media/head.css" type="text/css">
    <title>My title</title>
</head>

이 문제를 일으킬 수있는 것은 자바 스크립트뿐 아니라 사이트 제목도 마찬가지입니다. 좋은 경험 법칙은 css> js> site title입니다.

답변

html 파일에 빈 스크립트 태그를 추가하기 만하면됩니다.

이렇게 :

<script type="text/javascript"></script>

하지만 적어도 하나의 문자를 포함해야합니다. 공백이나 줄 바꿈 (\ n) 또는 주석 (//) 등

<script type="text/javascript"> </script>

<script type="text/javascript">
</script>

<script type="text/javascript">//</script>

또는 js 파일을 html 파일에 링크하십시오.

<script type="text/javascript" src="js/script.js"></script>

원하는 곳에 스크립트 태그를 배치 할 수 있습니다. 에서 머리 나 몸 태그입니다.

이 문제는 웹 사이트의 최종 상황에서 확실히 js 파일이 있기 때문에 개발 중에 만 발생합니다.