Question

单击按钮时，您将看到高度的延迟为0.3秒，但是当我们关闭div时，只有transform：scale（）有效。

当我们关闭div时，如何首先进行高度转换？

过渡延迟没有奏效。

的js

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

Jsfiddle

Answer 1

请改为尝试：

$(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

Answer 2

转换是300毫秒，JS的延迟也是如此。

这意味着，当您点击该按钮时，scale的转换会立即开始，height转换将在300毫秒后开始。事情是，在300ms之后 - 比例已经是0，所以你看不到第二次过渡。

将延迟更改为小于300毫秒的时间，您将看到两次点击的转换。

如何控制反向转换？

2 个答案: