我有一个div的风格，当悬停时，在背景颜色上有平滑的过渡。这个div在很多页面（包括主页）上都有显示，但是在主页上有不同的背景色。
div {
border:1px solid;
background-color:#fff;
display:inline-block;
width:100%;
height:100px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
div.homepage {
background-color:#777;
}
div:hover, div.homepage:hover {
background-color:#f00;
}
由于这个div在每个页面上都包含了一个PHP片段，我们的想法是（为了保持代码的简洁）用PHP输出一个通用的div，然后通过jQuery在主页上添加一个 "homepage "类。
$('div').addClass("homepage");
不幸的是，这将导致在页面加载时产生一个不希望看到的过渡（参见 抚弄为了清晰起见，加载后点击 "运行"）。) 如何在不影响正常行为的情况下，仅在页面加载时禁用CSS过渡（当div被悬停时）？
这就是我的工作原理。http:/css-tricks.comtransitions-only-after-page-load。
基本上，你在body标签上加了一个类。
<body class="preload">
这样就可以禁用转场效果了
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
然后一旦页面加载完毕，你就删除这个类。
$(window).load(function() {
$("body").removeClass("preload");
});
很简单! :D
Would'n it be ok if you simply set the initial gray color for the div instead of white ?
div {
border:1px solid;
background-color:#777;
display:inline-block;
width:100%;
height:100px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
请看这里更新的fiddle。fiddle
当你动态地添加了类 homepage 至 div.
如果 div 充满了 class 在加载中没有任何过渡。
在你的html中。
<div class="homepage"></div>
在发送至客户端之前，在PHP中添加该类。
仅在页面加载时禁用过渡。
<body class="js-stop-transition">
...
<script>document.body.classList.remove('js-stop-transition')</script>
</body>
并添加到CSS中。
body.js-stop-transition * { transition:none !important; }
在CSS中加入以下属性
div {
border:1px solid;
background-color:#fff;
display:inline-block;
width:100%;
height:100px;
}
div.homepage {
background-color:#777;
}
div:hover, div.homepage:hover {
background-color:#f00;
}
在添加了你的主页类后，将剩余的属性附加到下面的内容上
var transProperty=$('<style>div { -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }</style>');
$('head').append(transProperty);