搜索框上的转换不起作用答案

【问题标题】：Transition on search box not working搜索框上的转换不起作用
【发布时间】：2017-08-18 07:12:03
【问题描述】：

我正在尝试在聚焦时扩大搜索框的宽度。它工作正常，但过渡不起作用。有人请说明一下，这些代码有什么问题。想不通。

//css file
// class name of div(.searchBox)
.searchBox {
  margin: 100px auto;
  width: 300px;
  height: 200px;
  background-color: #ccc;
  padding-left: 20px;
  padding-top: 20px;
  -webkit-transition: all 2s easy-in-out;
  -moz-transition: all 2s easy-in-out;
  transition: all 2s easy-in-out;
}

// class name of input box
.search {
  padding: 10px;
  font-size: 1em;
}

/*
input[type="search"]:focus {
  width: 250px;
  background-color: #ddd;
}
*/

.searchBox form .search:focus {
  width: 250px;
  background-color: #444;
}

经过一些更改后的代码如下所示（不幸的是，转换不起作用）

【问题讨论】：

好像你错过了过渡的宽度。 -webkit-transition: width 2s easy-in-out;
同时显示您的 html
您应该将过渡设置为 .search，因为您将单独更改 .search 输入的宽度。你必须提到它的起始宽度。

标签： css transition

【解决方案1】：

试试这个，

.searchBox {
  margin: 100px auto;
  width: 300px;
  height: 200px;
  background-color: #ccc;
  padding-left: 20px;
  padding-top: 20px;
}
.search {
  padding: 10px;
  font-size: 1em;
  width: 130px;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.searchBox .search:focus {
  width: 250px;
  background-color: #444;
}

<div class="searchBox">
<input type="text" placeholder="search" class="search">
</div>

【讨论】：

请检查sn-p，它工作正常。并检查拼写它不是easy-in-out .. 它的ease.. ease-in-out
我的眼睛该死。谢谢，它有效，它是拼写。你只是节省一天。
@ZulfikarAli 如果解决了您的问题，请考虑接受答案。