How to revise the css transitions with a delay

Question

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;
}

DEMO

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

Answer 1

So here is my anwser and an EXAMPLE

HTML
<span class="close">X</span>
<div class="box">
  <input type="text">
  <input type="text">
  <input type="text">
</div>

CSS
.box {
  width: 0;
  height: 0;
  background: #e2e2e2;
  border-radius: 50%;
  padding: 30px;
  transition: all 300ms ease 600ms; /*This is the only thing You need to change*/
  overflow: hidden;
}
input {
  opacity: 0;
  border: 1px solid #fff;
  transition: all 300ms ease 300ms; /*input delay + input transition time 300 + 300 = 600*/
  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;
}

.close{
  cursor:pointer;
  position: absolute;
  top:0px;
  font-weight:bolder;
  font-size:1.5rem;
  display:none;
}

JQuery
$(document).ready(function () {

  $('.box').on('click', function () {
    $(this).addClass('animated');
    $('.close').css({display:"block"});
  });

  $('.close').on('click', function () {
    $('.box').removeClass('animated');
    $(this).css({display:"none"});
  });

});

The only change you need to do is add a delay to the box so it starts after the input, so it goes like input delay + input transition time(look at the comments in the css to see the values you need to play with)

One more tip, when you use the same values in the transition you could use all

/*this*/
transition: all 0.3s ease;

/*is the same  as*/
transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;

HOPE THIS HELPS T04435

Answer 2

add this to css

.box:not(.animated){
    transition-delay:0.3s;
}
.box:not(.animated) input{
    transition-delay:0s;
}

https://jsfiddle.net/apLtw7av/2/

explanation: transition-delay property will aply depending on having class animated. Clicking on close will remove animated class therefore aply new transition-delay

Answer 3

Try to show/hide input fields like this:

$(document).ready(function () {

    $('.box').on('click', function () {
        $('.box input').show();
        $(this).addClass('animated');
    });

    $('.close').on('click', function () {
        $('.box input').hide();
        $('.box').removeClass('animated');
    });

});