どうやって逆にトランジションを制御できますか？

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

移行が300msであるので、あなたのJSでの遅れがあります。

ボタンをクリックしてすぐにscaleの遷移が開始され、heightの遷移が300ms後に開始されることを意味します。 300ms後にはスケールはすでに0なので、第2のトランジションは見えません。

遅延を300ms未満に変更すると、両方のクリックで遷移が表示されます。