在我淡入淡出之前,我该如何获得一个弹出框？我曾经用’display：0;’然后使用
jquery .fadeIn().但现在如果我将显示设置为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() {
//???
});
解决方法
这似乎有点奇怪,但你可以做的是在css中,设置为显示：none.那么诀窍就是把你的jquery中的显示设置为flex,然后再隐藏,然后fadeIn：
CSS：
#popupContainer {
/* ... */
display:none;
flex-direction: row;
flex-wrap: wrap;
/* ... */
}
JS：
$("#popupContainer")
.css("display","flex")
.hide()
.fadeIn();
这是因为fadeIn()将项目设置回其以前的非隐藏显示值.所以设置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>
