如何在弹性盒子中淡入淡出？

Question

在我淡入之前，如何让弹性框不成为页面的一部分？我曾经用’display：0;‘来做到这一点然后使用 jQuery .fadeIn()。但是现在如果我将 display 设置为 0，当我将它淡入时，我当然会失去盒子的灵活性。如果我使用 jQuery 将 display 设置为 flex，那么它只会出现，而不是淡入。

HTML

 <div class="" id="popupContainer">
    <div class="flex-item-popup" id="popup">
        <div class="close"><i class="fa fa-2x fa-times-circle"></i></div>
        <h2></h2>
        <div class='text'></div>
        <div class="videos"></div>
        <div class="flex-container images"></div>
    </div>
</div>

CSS

 #popupContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    z-index: 15;
}

jQuery

 $(document).ready(function() {
    //???
});

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

Answer 1

这似乎有点奇怪，但你可以做的是在 css 中，将其设置为 display: none 。然后诀窍是在你的jQuery中设置 display 到 flex 然后再次隐藏它，然后 fadeIn ：

CSS ：

 #popupContainer {
    /* ... */

    display:none;
    flex-direction: row;
    flex-wrap: wrap;

    /* ... */
}

JS ：

 $("#popupContainer")
    .css("display", "flex")
    .hide()
    .fadeIn();

这是因为 fadeIn() 会将项目设置回其先前的非隐藏 display 值。因此设置 flex 并重新隐藏它将设置此“默认值”以将其设置回。

http://jsfiddle.net/z2kxyjcq/1/

 $("#popupContainer")
    .css("display", "flex")
    .hide()
    .fadeIn(2000);

 #popupContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display:none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    z-index: 15;
    background-color: red;
}
#popupContainer *{
    border: 1px solid blue;
background-color: white;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="" id="popupContainer">
<div class="flex-item-popup" id="popup">
    <div class="close"><i class="fa fa-2x fa-times-circle">1</i></div>
    <h2>2</h2>
    <div class='text'>a</div>
    <div class="videos">b</div>
    <div class="flex-container images">c</div>
</div>

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

Answer 2

最简单和最干净的方法（如果你可以编辑 DOM）是包装元素，并在 div 内部带有 flex 的同时淡化包装器

<div class="popup" id="popupContainer">
  <div class="popup__flexbox">
    <div class="popup__flex-item" id="popup">
    <div class="popup__close">
       <i class="fa fa-2x fa-times-circle"></i>
    </div>
    <h2></h2>
    <div class='popup__text'></div>
    <div class="popup__videos"></div>
    <div class="popup__images"></div>
  </div>
</div>

CSS：

 .popup {
  display: none;
}

.popup__flexbox {
  display: flex;
}

js：

 $("#popupContainer").fadeIn();

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