jQuery 菜單 animation 僅適用於第二次單擊

Question

我正在創建一個在單擊漢堡包按鈕后出現的菜單（右上角），並且我正在嘗試使用 jQuery function 將其滑入而不是讓它出現。

我遇到的問題是它似乎只在第二次嘗試時激活了滑動位。

我已經看到了很多關於此的其他問題，但答案要么是“您的代碼中有特定錯誤”，要么是“您必須在頁面加載時切換或以其他方式偽造 animation”。 我希望我的代碼沒有錯誤，並且我並不熱衷於使用切換黑客來繞過第一個 animation 未顯示。

據推測，這應該在第一次和以后的每一次都有效。

  $('.navTrigger').click(function () {
  $(this).toggleClass('active');
  $("#mainListDiv").toggleClass("show_list").fadeIn(0);
  $('li').toggleClass('logo2314441-mobile');
  $('li').toggleClass('li-mobile');
});

更新：我也用這個其他片段進行了測試，但仍然無法正常工作，不幸的是......

$('.navTrigger').click(function () {
  $(this).toggleClass('active');
  $("#mainListDiv").fadeIn(0, function(){
    $("#mainListDiv").toggleClass("show_list");
  });
  $('li').toggleClass('logo2314441-mobile li-mobile');
});

.nav div.main_list ul {
   width: 100%;
  padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    flex: 1;
 
    -webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    
    transform: translateY(-140px);
}

.nav div.show_list ul {
    overflow: hidden;
    display: block;
    -webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
    transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
      
      transform: translateY(0px);
}

我的問題是：如何讓 animation 在沒有加載修復/破解的情況下首次工作？ 提前致謝。

Answer 1

用這個測試：

$('.navTrigger').click(function () {
  $(this).toggleClass('active');
  $("#mainListDiv").fadeIn(0, function(){
    $("#mainListDiv").toggleClass("show_list");
  });
  $('li').toggleClass('logo2314441-mobile li-mobile');
});

淡入完成后將立即觸發回調。 現在列表將可見，然后添加 class，因此 animation 應該啟動。