Ist es möglich, eine HTML-Schaltfläche in ein Eingabetextfeld mit Übergangseffekt umzuwandeln? wenn möglich wie?

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 totransform into input field by animation of 1 second. and change back to button when any other button is clicked

Answer 1

wickeln sowohl die Taste und die Eingabe in einem div. geben Sie sowohl die Eingabe als auch die Schaltfläche die gleiche Höhe und Breite, geben Sie zusätzlich absolute Position, mit oben: 0 und links: 0.

Jetzt können Sie zwischen ihnen wechseln durch Opazität zwischen 1 und 0. Sie müssen setze keine Anzeige auf dem verblassten Element, unmittelbar nachdem die Deckkraft 0 wird, nicht vorher.