css点击搜索 输入框从右到左出现，关闭时从左到右隐藏怎么实现？

Question

如图样式，点击搜索的时候 输入框从右到左慢慢展开，关闭时 输入框从左到右慢慢关闭，请求动画怎么实现？谢谢

Answer 1

&nbsp;//&nbsp;css &nbsp;*&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-tap-highlight-color:&nbsp;transparent; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;.open&nbsp;.inp&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;30%; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;.inp&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;width&nbsp;0.65s&nbsp;linear; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;15%; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;10px; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;.inp_txt&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;html &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="box">&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="inp"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;class="inp_txt"&nbsp;type="text"> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</div> &nbsp;//js &nbsp;window.$&nbsp;=&nbsp;window.$&nbsp;||&nbsp;function&nbsp;(el)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;d&nbsp;=&nbsp;document;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(typeof&nbsp;el&nbsp;==&nbsp;'string')&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el&nbsp;=&nbsp;el.indexOf('.')&nbsp;!=&nbsp;-1&nbsp;?&nbsp;d.getElementsByClassName(el.replace(/\./,&nbsp;''))&nbsp;: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el.indexOf('#')&nbsp;!=&nbsp;-1&nbsp;?&nbsp;d.getElementById(el.replace(/\#/,&nbsp;''))&nbsp;: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d.querySelector(el); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;el; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;$('.inp_txt')[0].onfocus&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.box')[0].className&nbsp;+=&nbsp;'&nbsp;open'; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;$('.inp_txt')[0].onblur&nbsp;=&nbsp;function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;el&nbsp;=&nbsp;$('.box')[0]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el.className&nbsp;=&nbsp;el.className.replace(/\s+open/,&nbsp;''); &nbsp;&nbsp;&nbsp;&nbsp;}

Answer 2

过渡动画，宽度慢慢展开