Плавное появление input при клике на объект

04.08.19 10:49:42 04.08.19 10:50:23 17
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <style> .wrapper { width: 200px; position: relative; } .button { width: 20px; height: 20px; background-color: red; margin-left: auto; } input { width: 0; position: relative; top:0; opacity: 0; transition: 5s; display: inline-block; float: right; margin-top: -21px } input.active { width: 100%; opacity: 1; } </style> <div class="wrapper"> <div class="button"></div> <input type="text" class="input"> </div> <script type="text/javascript"> $('.button').click(function(){ $('.input').addClass('active'); }); </script>