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 应该启动。