Question

我正在创建一个接受来自用户的搜索字词的搜索栏。我已经插入了一个CSS转换（点击时它的宽度会增加）。我面临的问题是，当我点击提交按钮时，宽度为搜索栏会减少。我不希望这种情况发生，搜索栏应保留其更改的宽度。这是HTML：

$ex = User::whereRaw('month({$date}) = month(dob) and day($date) = day(dob)')->get();

这是CSS：

<input type="text" placeholder="    search" id="search">
  <button type="submit" id="submit" >submit </button>  
</form>

如果有帮助，这是我的代码的链接： https://codepen.io/ryoko1/pen/eRMYrg?editors=1111

Answer 1

您可以使用转换延迟（设置为100毫秒）：

transition: width 0.4s ease-in-out .1s;

聚焦元素的额外复位延迟：

input[type=text]:focus {
    transition-delay: 0s;
}

Answer 2

我遇到的问题是，当我点击提交按钮时，搜索栏的宽度会减小。

这是因为只要input losses focus它decrease input width它就会click回到最初指定的或默认宽度。当您submit button页面中的任何其他地方jQuery不仅$("input[type='text']").on("click",function(){ $(this).css("width","75%"); }); //Add this to your jQuery而且原因是它从输入中失去焦点时，甚至会发生这种情况。所以使用$(document).ready(function() { var url = "https://cors-anywhere.herokuapp.com/https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=bill gates"; $.getJSON(url, function(data) { // console.log(data[1]); }); $("#submit").click(function() { // document.getElementById("demo").innerHTML("hello"); // console.log("hello"); }); $("input[type='text']").on("click", function() { $(this).css("width", "75%"); }); }); click（）方法。

body {
  background-color: black;
  background-repeat: no-repeat;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Wikipedia-logo-en-big.png/800px-Wikipedia-logo-en-big.png");
}

h1 {
  color: white;
  text-align: center;
}

input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("http://icons.iconarchive.com/icons/ampeross/qetto-2/256/search-icon.png");
  background-size: 40px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out .1s;
  margin-left: 7%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Wikipedia Viewer</h1>
<form>
  <input type="text" placeholder="    search" id="search">
  <button type="submit" id="submit">submit </button>
</form>
<p id="demo"></p>

{{1}}

{{1}}

如何控制css过渡？

2 个答案: