Question: When you click the button , you will see that height works with 0.3s delay but when we close the div , only transform:scale() works.

How can i make height transition first when we close the div?

transition-delay did not worked.

Js

```
$(function() {
  $("#button").click(function() {
    $("#box").delay(300).queue(function() {
      $(this).toggleClass("height");
      $(this).dequeue();
    });
       $("#box").toggleClass("active");
  });
});

```

[Jsfiddle](https://jsfiddle.net/2gubdc8t/)

Answer: 
Try this instead:

```
$(function() {
    $("#button").click(function() {
        var box = $('#box');

        if(box.hasClass('active')){
            box.removeClass("height");
            box.delay(300).queue(function() {
                $(this).removeClass("active");
                $(this).dequeue();
            });
        } else {
            box.delay(300).queue(function() {
                $(this).addClass("height");
                $(this).dequeue();
            });
            box.addClass("active");
        }
    });
});

```

[JSFiddle](https://jsfiddle.net/2gubdc8t/1/)
The transition is 300ms and so is the delay in your JS.

That means that the minute you click the button, the transition for `scale` starts immediately, and the `height` transition will start 300ms later. Thing is, after 300ms - the scale is already 0 so you can't see the 2nd transition.

Change the delay to something less than 300ms and you'll see the transition on both clicks.