I have following code
HTML
<a href="#" class="close">Close</a>
<div class="box">
<input type="text">
<input type="text">
<input type="text">
</div>
jQuery
$(document).ready(function () {
$('.box').on('click', function () {
$(this).addClass('animated');
});
$('.close').on('click', function () {
$('.box').removeClass('animated');
});
});
CSS
.box {
width: 0;
height: 0;
background: #e2e2e2;
border-radius: 50%;
padding: 30px;
transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
overflow: hidden;
}
input {
opacity: 0;
border: 1px solid #fff;
transition: opacity 0.3s ease;
transition-delay: 0.3s;
display: block;
width: 100%;
margin-bottom: 10px;
padding: 5px;
box-sizing: border-box;
}
.box.animated {
border-radius: 0;
width: 400px;
height: 400px;
padding: 20px;
}
.box.animated > input {
opacity: 1;
}
There are two things
1) Once the box has been expanded the input elements should be visible. I have achieved this using transition-delay
property.
2) But when the close link is clicked first the inputs opacity should be 0 and when the inputs are completely invisible then the box should go to its previous shape which is a circle.
Question: How do i achieve #2