페이지로드시 CSS 전환 실행 중지
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);
});
});
Now you can mark any element on your page with css-transitions-only-after-page-load class:
<div class="container css-transitions-only-after-page-load">
...
</div>
This is the only solution that I have been able to get to reliably work.
1. Add a "preload" class to the body element:
<body class="preload">
2. Add the following CSS:
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
3 Add the following JS:
$(document).ready(function() {
$("body").removeClass("preload");
});
The accepted answer did not do the trick for me. There's a bug in Google Chrome that can be avoided just by adding a script in the page. Even an empty script solves the problem.
The best way to solve this problem is to use the single space, empty <script> fix found in the answers on this page. However I've found 2 other ways to solve this problem.
- Place the CSS of the offending element(s) inside a
<style>tag in the header of your HTML file. The bug only occurs when the CSS is called from an external stylesheet. - Place the offending element(s) in a
flexboxcontainer. This fixes the bug as well.
nienn posts the solution. The problem lies in the document head, and where/how you are loading your stylesheets. It's similar to the "can't modify headers, they're already sent" in PHP, except HTML/CSS/webkit doesn't throw you an error.
I was experiencing this exact problem, read nienn's post, and I reviewed my head. Here were my contents previously.
<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>
Notice I'm not loading any JS, also note of how I was loading the style sheets page after specifying the title. After moving the stylesheet-references to the 'back', it worked like a charm. The end result looked like this:
<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>
It's not only javascript that can cause this problem, but the site title as well. I guess a good rule of thumb is css > js > site title.
Have you tried using different transition properties? Such as:
-moz-transition: color .2s; /* Firefox 4 */
-webkit-transition: color .2s; /* Safari and Chrome */
-o-transition: color .2s; /* Opera */
Worked just fine for me in Chrome.
EDIT: You answered the question about browsers already. You should try using -webkit-transform
참고URL : https://stackoverflow.com/questions/14389566/stop-css-transition-from-firing-on-page-load
'IT TIP' 카테고리의 다른 글
| 문자열 매개 변수가있는 C # TrimStart (0) | 2020.12.07 |
|---|---|
| const 비 정수 지수로 pow () 최적화? (0) | 2020.12.07 |
| Android에서 머티리얼 디자인 원형 진행률 표시 줄을 구현하는 방법 (0) | 2020.12.07 |
| Postgres 9.3에서 현재 시간대 이름을 얻으려면 어떻게해야합니까? (0) | 2020.12.07 |
| Android Studio 3.0 컴파일 문제 (구성 중에서 선택할 수 없음) (0) | 2020.12.07 |