96

ページの読み込み時にCSStransitionプロパティが起動されるという問題が発生しています。

問題は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ます。

:hover疑似クラスにカラートランジションを適用したくないのは、 MouseLeaveのトランジションが適用されないためです。

Webページ全体でテキストが点滅するのは本当に面倒です。これまで、トランジションが本当に必要でない限り、トランジションの使用は避けてきました。それでも、慎重に使用しています。私が見ていない、これに対するいくつかの本当に明白な解決策があれば素晴らしいでしょう！

これはGoogleChromeで発生します。他のブラウザではテストしていません。

jsfiddle.net/ShyZp/2（@Shmiddtyに 感謝）

4

8 に答える 8

133

Chromeには、ページに要素が含まれている場合にCSSトランジションが発生するバグがあります。<form>

簡単な修正の1つは、単一のスペースを含むスクリプトタグをページのフッターに追加することです。

<script> </script>

https://crbug.com/332189およびhttps://crbug.com/167083でバグを追跡できます。

于 2017-03-23T07:23:25.530 に答える
52

この質問に対する@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の読み込みがCSSの読み込みをDOMの準備ができた後まで遅らせていたと思います。その時までに（@Shmiddtyが提案したように）、テキストにはすでにデフォルトのブラウザーの色が割り当てられていて、CSStransition宣言を使用してそのスタイルの色にフェードインしていました。

**これが最も適切な方法かどうかはまだわかりませんが、機能します。誰かがより良い解決策を持っているなら、自由に追加または編集してください。

于 2013-01-19T15:52:54.050 に答える
16

CSSに追加します。

.css-transitions-only-after-page-load * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  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>
于 2013-11-15T13:59:35.883 に答える
6

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>

この問題を引き起こす可能性があるのはJavaScriptだけでなく、サイトのタイトルでもあります。経験則としては、css>js>サイトタイトルだと思います。

于 2015-06-02T21:17:03.390 に答える
6

受け入れられた答えは私のためにトリックをしませんでした。ページにスクリプトを追加するだけで回避できるGoogleChromeのバグがあります。空のスクリプトでも問題は解決します。

于 2016-10-17T21:21:39.030 に答える
5

この問題を解決する最善の方法は、<script>このページの回答にある単一のスペース、空の修正を使用することです。しかし、私はこの問題を解決する他の2つの方法を見つけました。

  1. 問題のある要素のCSSを、<style>HTMLファイルのヘッダーのタグ内に配置します。このバグは、CSSが外部スタイルシートから呼び出された場合にのみ発生します。
  2. 問題のある要素をflexboxコンテナに入れます。これにより、バグも修正されます。
于 2017-04-08T15:08:00.793 に答える
3

空のスクリプトタグをhtmlファイルに追加するだけです。

このような：

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

ただし、少なくとも1文字を含める必要があります。スペースまたは改行（\ 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>

スクリプトタグはどこにでも配置できます。頭または体のタグ。

この問題は開発中にのみ発生します。これは、Webサイトの最終的な状況では、間違いなくjsファイルが含まれるためです。

于 2020-10-07T20:33:10.387 に答える
-2

さまざまな遷移プロパティを使用してみましたか？そのような：

-moz-transition: color .2s; /* Firefox 4 */
-webkit-transition: color .2s; /* Safari and Chrome */
-o-transition: color .2s; /* Opera */

Chromeで問題なく動作しました。

編集：あなたはすでにブラウザについての質問に答えました。-webkit-transformを使用してみてください

于 2013-01-17T22:56:18.973 に答える