Html 停止 CSS 转换在页面加载时触发

Question

提问by nienn

I'm experiencing an issue with the CSS transitionproperty beeing fired on page load.

我遇到了transition在页面加载时触发的 CSS属性问题。

The problem is that when I apply a colortransitionto an element, (ex: transition: color .2s) then when the page first loads my elements flashes from black to it's own assigned color.

问题是，当我将 acolortransition应用于元素时，（例如：）transition: color .2s然后当页面第一次加载时，我的元素从黑色闪烁到它自己指定的颜色。

Supposing I have the following code:

假设我有以下代码：

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>

On page load, my p.greenwill fade from blackto green.

在页面加载时，我的p.green将从black到淡出green。

I don't want to apply the color transition to the :hoverpseudo class as that would not apply the transition onMouseLeave.

我不想将颜色过渡应用于:hover伪类，因为这不会应用onMouseLeave过渡。

I'ts really annoying having the text flashing across the webpage. Up to this moment I have been avoiding using transitions unless I really need them and even so I use with care. It would be great if there is some really obvious solution to this that I'm not seeing!

让文字在网页上闪烁真的很烦人。到目前为止，我一直在避免使用过渡，除非我真的需要它们，即使如此我也要小心使用。如果有一些我没有看到的非常明显的解决方案，那就太好了！

This happens on Google Chrome. I haven't tested in other browsers.

这发生在谷歌浏览器上。我没有在其他浏览器中测试过。

jsfiddle.net/ShyZp/2(thanks @Shmiddty)

jsfiddle.net/ShyZp/2 （感谢@Shmiddty）

Answer 1

采纳答案by nienn

@Shmiddty comments on this question left me thinking, so I have been playing around with the code and found a solution.

@Shmiddty 对这个问题的评论让我思考，所以我一直在玩代码并找到了解决方案。

The problem lies on the headerdeclarations. By inverting the order of the CSS and JS external file calls - i.e. putting the CSS before the JS - the color transitions stop firing on page load:

问题在于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>

My guess is that the JS load was delaying the load of the CSS to after the DOM was ready. By that time (as @Shmiddty suggested) the text had already been assigned the default browser color and was then using my CSS transitiondeclaration to fade into its styled color.

我的猜测是 JS 加载将 CSS 的加载延迟到 DOM 准备好之后。到那个时候（正如@Shmiddty 建议的那样）文本已经被分配了默认的浏览器颜色，然后使用我的 CSStransition声明淡入其样式颜色。

** I'm still not sure this is the most appropriate way to do it, but it works. If anyone has a better solution please feel free to add or edit.

** 我仍然不确定这是最合适的方法，但它有效。如果有人有更好的解决方案，请随时添加或编辑。

Answer 2

回答by spencer.sm

There is a bugin Chrome that causes CSS transitions to fire if the page includes a <form>element.

如果页面包含元素，Chrome 中有一个错误会导致 CSS 转换触发<form>。

One simple fix is to add a script tag containing a single space to the footer of the page.

一个简单的解决方法是向页面的页脚添加一个包含单个空格的脚本标记。

<script> </script>

You can follow the bug at https://crbug.com/332189and https://crbug.com/167083.

您可以在https://crbug.com/332189和https://crbug.com/167083 上关注该错误。

Answer 3

回答by Roman Pushkin

Add to your CSS:

添加到您的 CSS：

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

And add some code to your global JavaScript file:

并将一些代码添加到您的全局 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-loadclass:

现在，您可以使用css-transitions-only-after-page-load类标记页面上的任何元素：

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

Answer 4

回答by komlenic

Thisis the only solution that I have been able to get to reliably work.

这是我能够可靠地工作的唯一解决方案。

1. Add a "preload" class to the body element:

1. 给body元素添加一个“预加载”类：

<body class="preload">

2. Add the following CSS:

2. 添加以下 CSS：

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
 }

3 Add the following JS:

3 添加以下JS：

$(document).ready(function() {
  $("body").removeClass("preload");
});

Answer 5

回答by Lando

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.

nienn发布了解决方案。问题在于文档头，以及加载样式表的位置/方式。它类似于 PHP 中的“无法修改标题，它们已经发送”，除了 HTML/CSS/webkit 不会向您抛出错误。

I was experiencing this exact problem, read nienn's post, and I reviewed my head. Here were my contents previously.

我遇到了这个确切的问题，阅读了 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>

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:

注意我没有加载任何 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>

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.

导致此问题的不仅是 javascript，还有站点标题。我想一个好的经验法则是 css > js > 站点标题。

Answer 6

回答by Manuszep

The accepted answer did not do the trick for me. There's a bugin Google Chrome that can be avoided just by adding a script in the page. Even an empty script solves the problem.

接受的答案对我没有帮助。谷歌浏览器有一个bug，可以通过在页面中添加脚本来避免。即使是空脚本也能解决问题。

Answer 7

回答by DR01D

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.

解决此问题的最佳方法是使用<script>此页面上的答案中的单个空格、空白修复程序。但是，我找到了其他两种方法来解决这个问题。

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.

将违规元素的 CSS 放置在<style>HTML 文件标题的标记内。该错误仅在从外部样式表调用 CSS 时发生。
将违规元素放入flexbox容器中。这也修复了错误。

Answer 8

回答by Banath

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.

在 Chrome 中对我来说效果很好。

EDIT: You answered the question about browsers already. You should try using -webkit-transform

编辑：您已经回答了有关浏览器的问题。您应该尝试使用 -webkit-transform

Html 停止 CSS 转换在页面加载时触发

提问by nienn

CSS

CSS

HTML

HTML

采纳答案by nienn

回答by spencer.sm

回答by Roman Pushkin

回答by komlenic

1. Add a "preload" class to the body element:

1. 给body元素添加一个“预加载”类：

2. Add the following CSS:

2. 添加以下 CSS：

3 Add the following JS:

3 添加以下JS：

回答by Lando

回答by Manuszep

回答by DR01D

回答by Banath

相关推荐

最近更新

标签

Html 停止 CSS 转换在页面加载时触发

提问by nienn

CSS

CSS

HTML

HTML

采纳答案by nienn

回答by spencer.sm

回答by Roman Pushkin

回答by komlenic

1. Add a "preload" class to the body element:

1. 给body元素添加一个“预加载”类：

2. Add the following CSS:

2. 添加以下 CSS：

3 Add the following JS:

3 添加以下JS：

回答by Lando

回答by Manuszep

回答by DR01D

回答by Banath

相关推荐

这个 HTML 中的 3D 是做什么的？

HTML 输入文件 - 如何翻译“选择文件”和“未选择文件”？

Html 你能让 <input type="text"> 元素的尺寸小于 1 吗？

Html 左对齐列表编号和文本

相关推荐

最近更新

标签