Плавное появление input при клике на объект
∘CSS 04.08.19 04.08.19 514
на главную сниппетов
<![CDATA[<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> ]]> на главную сниппетов
