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

Question

我有这个:

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

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

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

CSS for nav__item__account-dropdown--open:

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

虽然这种解决方法有效,但display: flex在滑动完成之前会将其删除,从而导致一些不需要的视觉效果.

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

Answer 1

请尝试以下开始回调:

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

Answer 2

您可以通过以下两种方式实现所讨论的内容。

选项1

实现此目的的一种方法是将元素包装在 a 中，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');
});

Answer 3

我不知道这是否是较新的行为，但至少在 jQuery 3.2 中，如果元素具有 display:none 的内联样式，jQuery将删除此属性而不是在 slideUp()、slideToggle() 上添加新的显示属性等等。

因此，如果您在 CSS 中将元素设置为 display:flex，然后在元素上使用样式标记内联应用 display:none，或者在页面加载时立即使用类似于以下内容的内容：

$('.element').css('display', 'none');

然后，当您使用 slideDown() 等时，您将留下一个具有正确显示属性的可见元素。

如果您的元素应该只在特定的屏幕尺寸下隐藏，您可以运行代码以根据屏幕宽度在 if 语句中隐藏元素，例如

if( $(window).width() < 600){
    $('.element').css('display', 'none');
}

这具有在页面完成加载之前短暂显示元素的潜在缺点，但如果您打算允许稍后显示元素，我认为这没什么大不了的。您还可以使用诸如 slideUp() 之类的东西来最初隐藏元素，因此它可以很好地进行动画处理。