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

Answer 1

请尝试以下的开始回调函数：

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

- itacode

---

完美运行。如果您想添加持续时间选项，可以像这样添加：start: function() {...}, duration: 200 - Sambuxc

Answer 2

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

选项1：

一种实现方法是将元素包装在一个div内，并为包装器div添加class，其属性为"display: flex"。例如（假设基于BEM CSS的HTML结构大致如下）：

<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');
});

- Adam McKenna

Answer 3

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

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

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

当您使用slideDown()等函数时，您将得到一个显示正确显示属性的可见元素。

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

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

这种做法有潜在的缺点，就是页面加载完之前元素可能会短暂地显示出来，但如果你之后允许该元素显示，我认为这不是什么大问题。你也可以使用slideUp()等方法最初将元素隐藏起来，以此使其动画效果更佳。

- Roxy Walsh

---

另一种应用初始样式的方法是使用内联样式style="display: none;"，并使用类，例如class="make-this-flex"与CSS一起使用，例如.make-this-flex { display: flex; }。这避免了页面加载期间元素短暂显示的问题。 - DigitalDan