输入宽度上的转换属性不起作用[重复]答案

【问题标题】：Transition property on input width not working [duplicate]输入宽度上的转换属性不起作用[重复]
【发布时间】：2018-08-22 19:39:15
【问题描述】：

我有一个简单的待办事项列表应用程序。我想在hovered开启时增加文本字段的width，在3 seconds的过程中。

我使用了transition 属性，但它不能正常工作。问题是当鼠标指针悬停在文本字段上时width 会立即增加，而不是在3 seconds 的过程中增加。

我在这里做错了什么？

这是代码codepen

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

因为你的input does not have width property in default state its auto。

转换将不起作用auto to some value。

只需将width 属性添加到input。它会起作用的。

这是工作代码。

.main-container {
  border: 1px solid #000;
  width: 45%;
  text-align: center;
}

input {
  width: 120px;
  padding: 8px;
  border-radius: 7px;
  transition: width 3s;
  border: 2px solid #222;
}

input:hover {
  border: 2px solid green;
  width: 300px;
}

<div class="main-container">
  <h1>To-Do List</h1>
  <input type="text" id="input-field" placeholder="enter new item" />
  <button id="btn-add-item">Add Item</button>
  <button id="btn-remove-item">Remove Last Item</button>
  <ul></ul>
</div>
<!--end of main container-->

【讨论】：

【解决方案2】：

您必须在输入中添加不断变化的 CSS 属性，这样在悬停时会发生变化。

input{
     width: 100px;
     transition: width 3s ease-out;
}
input:hover{
    width: 300px;
}

您的代码在输入标签 CSS 中缺少宽度。

【讨论】：