jQuery 如何在 flex 盒中淡入淡出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28904698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how fade in a flex box?
提问by LauraNMS
How do I get a flex box to not be part of the page until I fade it in? I used to do this with 'display: 0;' and then use jquery .fadeIn(). But now if I set display to 0, when I fade it in, of course I lose the flex-iness of the box. If I use jquery to set display to flex, then it will just appear, not fade in.
在淡入之前，如何让 flex 框不成为页面的一部分？我曾经用'display：0;'来做到这一点 然后使用 jquery .fadeIn()。但是现在如果我将 display 设置为 0，当我淡入时，我当然会失去盒子的灵活性。如果我使用 jquery 将显示设置为 flex，那么它只会出现，而不是淡入。
<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>
#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() {
//???
});
回答by James Montagne
It seems a bit odd, but what you can do is in the css, set it to display: none. Then the trick is to set the displayto flexin your jquery and then hide it again, then fadeIn:
看起来有点奇怪，但你可以做的是在 css 中，将其设置为display: none. 然后诀窍是在你的 jquery 中设置displaytoflex然后再次隐藏它，然后fadeIn：
CSS:
CSS:
#popupContainer {
/* ... */
display:none;
flex-direction: row;
flex-wrap: wrap;
/* ... */
}
JS:
JS：
$("#popupContainer")
.css("display", "flex")
.hide()
.fadeIn();
This works because fadeIn()will set the item back to its previous non-hidden displayvalue. So setting flexand re-hiding it will set this "default" for it to be set back to.
这是有效的，因为fadeIn()会将项目设置回其先前的非隐藏display值。因此，设置flex并重新隐藏它将设置此“默认值”，以便将其设置回。
http://jsfiddle.net/z2kxyjcq/1/
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>回答by Lucas
You can set the opacity as 0 and animate:
您可以将不透明度设置为 0 并设置动画：
$('#popupContainer').animate({
opacity: 1
}, 'fast');
回答by adyry
Easiest and most clean way (if you can edit DOM) is to wrap the element, and fade the wrapper while having div with flex inside
最简单和最干净的方法（如果您可以编辑 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:
css：
.popup {
display: none;
}
.popup__flexbox {
display: flex;
}
js:
js：
$("#popupContainer").fadeIn();
回答by Сергей Савельев
var flex = $('#flex');
console.log(flex.css('display'));
flex.hide();
flex.velocity('fadeIn', {duration: 100, display: 'flex'});
setTimeout(function(){
console.log(flex.css('display'));
}, 100);#flex{
display: 'flex'
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<div id="flex"></div>