我如何控制反向转换？

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

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

这意味着在您单击按钮的那一刻，scale 的转换将立即开始，而 height 的转换将在 300 毫秒后开始。问题是，在 300 毫秒之后 - 比例已经为 0，因此您看不到第二次转换。

将延迟更改为小于 300 毫秒，您将在两次点击时看到过渡。

Answer 2

试试这个：

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

我如何控制反向转换？

How can i control a transition in reverse?

css

transform