仅在页面加载时禁用CSS过渡 [英] Disable CSS transitions on page load only
问题描述
我将div的样式设置为在悬停时在背景颜色上具有平滑的过渡.这个div显示在许多页面(包括首页)中，但是在首页中它具有不同的背景色.
I have a div styled to have smooth transitions on background-color when hovered. This div is displayed in many pages (including homepage) but in homepage it has a different background-color.
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"类.
Since this div is included with a PHP snippet on each page, the idea (to keep code clean) is to output a generic div with PHP and then add a "homepage" class on homepage only, via jQuery.
$('div').addClass("homepage");
不幸的是，这会导致页面加载发生不希望的转换(为清楚起见，请参见 fiddle 加载后运行".如何仅在页面加载时禁用CSS转换，而又不影响正常行为(当div悬停时)?
Unfortunately, this causes an undesired transition on page load (see fiddle, for sake of clarity click "Run" after loading). How can I disable CSS transitions on page load only, without affecting normal behaviour (when div is hovered)?
推荐答案
这对我有用: http://css-tricks.com/transitions-only-after-page-加载/
本质上，您将一个类添加到body标签:
Essentially, you add a class to the body tag:
<body class="preload">
禁用过渡:
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
然后，在页面加载完成后，您就删除了该类:
Then once the page has loaded you remove the class:
$(window).load(function() {
$("body").removeClass("preload");
});
简单！ :D
这篇关于仅在页面加载时禁用CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
