Question

我有这个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;
}

我的问题是，当我刷新页面时，搜索输入的背景变为白色，然后回到灰色，这意味着在我没有点击输入的情况下发生了转换，我该怎么做呢？

Answer 1

刚刚在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问题

如何防止转换动画运行页面加载

1 个答案: