使 <input /> 出现在过渡 <div>

Question

I have this setup:

 .wrapper { height: 40px; width: 80px; border-style: solid; border-width: 2px; border-radius: 40px; border-color: red; display: flex; align-items: center; justify-content: center; } .element { background-color: hotpink; width: 10px; height: 10px; } .wrapper:hover { width: 800px; -webkit-transition: width 0.4s ease-in-out; justify-content: left; padding-left: 35px; } .text-input { display: none; } .wrapper:hover .text-input { display: block; } 

 <div> <div class=wrapper> <div class=element> <input class=text-input type="text" name="search" /> </div> </div> </div> 

https://codepen.io/anon/pen/BOzJxL

I need the the textinput to appear next to the hotpink div elemenet (it needs to stay where it is when the input appears). I need it to appear bit-by-bit - sort of being revealed pixel by piyxel. When leaving the div, I want it to be hidden again - same style as it came in.

Answer 1

This will work for you.

 .wrapper { height: 40px; width: 75px; border-style: solid; border-width: 2px; border-radius: 40px; border-color: red; display: flex; align-items: center; padding-left:30px; -webkit-transition: width 0.4s ease-in-out; box-sizing:border-box; } .element { background-color: hotpink; width: 10px; height: 10px; } .wrapper:hover { width: 100%; } .text-input { max-width: 0; float: left; padding: 0px; border: 0px transparent; -webkit-transition:max-width 0.6s ease-in-out; transition:max-width 0.6s ease-in-out; } .wrapper:hover .text-input { max-width: 50%; padding: 2px; border: 1px solid #d4d4d4; } 

 <div class="wrapper"> <div class="element"></div> <input class="text-input" type="text" name="search" /> </div>