Question

.button {
  display: inline-block;  border-radius: 2px;  background-color: #f4511e;  border: none;  text-align: center; 
  font-size: 14px;   font-family:'Lato',arial;  color:white;   padding:5px; 
    transition: all 0.5s;  cursor: pointer;   height:30px;  width:90px;     
  }



.search {
margin-bottom:-20px; border-top-left-radius:6px;  border-top-right-radius:2px;  border-bottom-right-radius:2px;  
border-bottom-left-radius:6px;  border:1px solid #b3daff; height:25px; outline: none; margin-right:-3px;
  }

<button class="button" id="green">lookafter</button>

<input type="text" class="search" id="box" style="width: 100px; display: none;"  placeholder="lookafter"  autofocus />

 I need the button to transform  into input field  by animation of 1 second. and change back to button when any other button is clicked

Answer 1

将div中的按钮和输入都包装起来。给输入和按钮提供相同的高度和宽度，另外给它们绝对位置，top：0和left：0。

现在你可以通过在1和0之间切换不透明度来在它们之间切换。你需要在不透明度变为0之后在faded元素上设置display none，而不是之前。

是否可以将HTML按钮转换为具有过渡效果的输入文本字段？如果可能怎么样？

1 个答案: