如何防止过渡动画运行页面加载

我有这个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 元素中添加了一类"预加载"。

<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");
});

问题的快速视频

相关内容

最新更新

热门标签：