柔盒如何褪色? [英] how fade in a flex box?
问题描述
如何使柔韧性框不褪色,直到淡入?我过去常常用"display:0;"来做到这一点.然后使用jquery .fadeIn().但是现在,如果我将显示设置为0,则当我淡入显示时,我当然会失去盒子的柔韧性.如果我使用jquery将display设置为flex,那么它将仅显示而不是淡入.
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.
<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中进行操作,将其设置为display: none
.然后,诀窍是在您的jquery中将display
设置为flex
,然后再次将其隐藏,然后是fadeIn
:
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 display
to flex
in your jquery and then hide it again, then fadeIn
:
CSS :
#popupContainer {
/* ... */
display:none;
flex-direction: row;
flex-wrap: wrap;
/* ... */
}
JS :
$("#popupContainer")
.css("display", "flex")
.hide()
.fadeIn();
之所以起作用,是因为fadeIn()
会将项目设置回其先前的非隐藏display
值.因此,设置flex
并重新隐藏它会将该默认"设置为重新设置为该值.
This works because fadeIn()
will set the item back to its previous non-hidden display
value. So setting flex
and re-hiding it will set this "default" for it to be set back to.
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>
这篇关于柔盒如何褪色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!