CODEWITHSUNDEEP
csstransform
user6145950
user6145950

Reputation:

How can i control a transition in reverse?

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

Upvotes: 2

Views: 63

Answers (2)

Stu Furlong
Stu Furlong

Reputation: 3629

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

Upvotes: 1

Narxx
Narxx

Reputation: 8299

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.

Upvotes: 0

Related Questions