我有这个 HTML 代码:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/music_index.css">
<head>
<title></title>
</head>
<body>
<div class="main_container">
<div class="main_header">
<center><input type="search" class="main_page_search"></center>
</div>
</div>
</body>
</html>
还有这个 CSS:
body {
background-color: #F3F3F3;
font: 12px/1.4 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
margin: 0;
}
.main_container {
background-color: white;
width: 1050px;
margin: 0 auto;
height: 900px;
}
.main_header {
height: 400px;
border-top: 8px gray solid;
background: url(../img/header_bg.jpg) no-repeat;
background-size: 1050px;
}
.main_page_search {
font-family: "Interstate","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Garuda,Verdana,Tahoma,sans-serif;
margin-top: 200px;
width: 60%;
color: #666;
outline: 0;
border: 0;
padding: 5px 7px;
background: #e5e5e5;
height: 40px;
border-radius: 4px;
-webkit-transition: background 0.4s ease 0s;
-moz-transition: background 0.4s ease 0s;
-o-transition: background 0.4s ease 0s;
transition: background 0.4s ease 0s;
}
.main_page_search:focus {
background-color: white;
}
我的问题是，当我刷新页面时，搜索输入的背景变为白色，然后又变回灰色，这意味着在我没有点击输入时发生了转换，我该如何防止这种情况发生？
最佳答案
只是在 body 元素中添加了一个“preload”类。
<body class="preload">
然后确保不会发生转换:
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
然后在页面加载时删除该类:
JQuery
$(window).load(function() {
$("body").removeClass("preload");
});
Quick video的问题
关于html - 如何防止过渡动画运行页面加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35973003/