Gio*_*gio 4 jquery css-transitions
我有一个 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 在主页上添加“主页”类。
$('div').addClass("homepage");
不幸的是，这会导致页面加载时出现不希望的转换（请参阅fiddle，为了清楚起见，在加载后单击“运行”）。如何仅在页面加载时禁用 CSS 转换，而不影响正常行为（当 div 悬停时）？
Cra*_*ole 13
这对我有用：http : //css-tricks.com/transitions-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
当您动态地将类添加homepage到div.
如果div加载了，则class加载中没有任何转换。
在你的html中：
<div class="homepage"></div>
在将类发送到客户端之前，在 PHP 中添加该类。
| 归档时间： |
|
| 查看次数： |
13687 次 |
| 最近记录： |