nie*_*enn 61 html css google-chrome
我遇到了transition在页面加载时触发的CSS 属性问题.
问题是,当我将一个color transition元素应用于(ex :) 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伪类,因为它不会应用转换onMouseLeave.
让文字在网页上闪烁真的很烦人.到目前为止,我一直在避免使用转换,除非我真的需要它们,即使我小心翼翼地使用它.如果有一些非常明显的解决方案,我没有看到它会很棒!
编辑1: 这在Google Chrome上发生.尚未在其他浏览器中测试过......
编辑2: 经过一些测试,我意识到我不需要具有指定颜色的父元素来触发具有颜色过渡属性的元素上的闪烁,所以我重新提出了我的问题
jsfiddle.net/ShyZp/2 (感谢@Shmiddty)
spe*_*.sm 69
有一个bug在Chrome中,导致CSS转换到射击,如果页面包含一个<form>元素.
一个简单的解决方法是将包含单个空格的脚本标记添加到页面的页脚.
<script> </script>
nie*_*enn 38
@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>
我的猜测是,在DOM准备好之后,transition负载正在延迟headerto 的负载.到那时(正如@Shmiddty建议的那样)文本已被分配了默认的浏览器颜色,然后使用我的transition header声明淡入其样式的颜色.
**我仍然不确定这是最合适的方法,但它确实有效.如果有人有更好的解决方案,请随时添加或编辑.
添加到您的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>
小智 7
nienn发布了解决方案。问题在于文档头，以及加载样式表的位置/方式。它类似于 PHP 中的“无法修改标题，它们已经发送”，除了 HTML/CSS/webkit 不会向您抛出错误。
我遇到了这个确切的问题，阅读了 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 > 站点标题。
解决此问题的最佳方法是使用<script>本页答案中找到的单个空格、空修复。不过我发现了另外两种方法来解决这个问题。
<style>HTML 文件标头的标签内。仅当从外部样式表调用 CSS 时才会出现该错误。flexbox容器中。这也修复了该错误。| 归档时间： |
|
| 查看次数： |
28501 次 |
| 最近记录： |