jQuery slideDown() 函数是否可以应用 display:flex 属性而不是 display:block？

Question

我有这个：

 function searchOpen() {
    $('.account').addClass('account--open');
    $('.account-dropdown').slideDown(250);
    $('.account-dropdown').addClass('account-dropdown--open');
    $('.account-dropdown input').focus();
}

function searchClose() {
    $('.account').removeClass('account--open');
    $('.account-dropdown').slideUp(250);
}

function searchDropdown() {
    if ($('.account-dropdown').is(":visible")) {
        searchClose();
    } else {
        searchOpen();
    }
}

account-dropdown--open 的 CSS 是：

 .account-dropdown--open {
    display: flex !important;
    justify-content: center;
}

尽管此解决方法有效，但 display: flex 在向上滑动完成之前被删除，这会导致一些不需要的视觉效果。

有没有办法让 slideUp() 和 slideDown() 应用 display: flex 而不是 display: block ？

原文由 Varin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

请尝试以下启动回调：

 $(".item").slideDown({
  start: function () {
    $(this).css({
      display: "flex"
    })
  }
});

原文由 itacode 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这里有两种可能的方法可以实现您所讨论的内容。

选项1

实现此目的的一种方法是将元素包装在 div 中，并给包装器 div 一个具有 display: flex 属性的类。

例如（假设您的 HTML 结构基于您的 BEM CSS）：

 <nav class="nav" class="nav___item">
  <div class="nav__item">
    <div style="display: flex">
      <div class="nav__item__account-dropdown--open">
        ...
      </div>
    </div>
  </div>
</nav>

选项 2

或者，您可以使用匿名回调函数覆盖该函数，如下所示：

 $('.nav__item__account-dropdown--open').slideUp(500, function() {
  $(this).css('display', 'flex');
});

原文由 adamcantcook 发布，翻译遵循 CC BY-SA 3.0 许可协议