如何在 flex 盒中淡入淡出? [英] how fade in a flex box?
问题描述
如何在淡入之前让弹性框不成为页面的一部分?我曾经用'display:0;'来做到这一点然后使用 jQuery .fadeIn().但是现在如果我将 display 设置为 0,当我淡入时,我当然会失去盒子的弹性.如果我使用 jQuery 将显示设置为 flex,那么它只会出现,而不是淡入.
HTML
<div class="flex-item-popup";id=弹出窗口"><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>
CSS
#popupContainer {位置:绝对;左:0;顶部:0;宽度:100%;高度:100%;显示:弹性;弹性方向:行;flex-wrap: 包裹;对齐内容:居中;对齐内容:flex-start;对齐项目:居中;z-索引:15;}
jQuery
$(document).ready(function() {//???});
看起来有点奇怪,但是你可以做的是在 css 中,将其设置为 display: none
.然后诀窍是在你的jquery中将 display
设置为 flex
然后再次隐藏它,然后 fadeIn
:
CSS:
#popupContainer {/* ... */显示:无;弹性方向:行;flex-wrap: 包裹;/* ... */}
JS:
$("#popupContainer").css(显示",弹性").隐藏().淡入();
这是有效的,因为 fadeIn()
会将项目设置回其以前的非隐藏 display
值.因此,设置 flex
并重新隐藏它会将此默认值"设置为重新设置.
http://jsfiddle.net/z2kxyjcq/1/
$("#popupContainer").css(显示",弹性").隐藏().fadeIn(2000);
#popupContainer {位置:绝对;左:0;顶部:0;宽度:100%;高度:100%;显示:无;弹性方向:行;flex-wrap: 包裹;对齐内容:居中;对齐内容:flex-start;对齐项目:居中;z-索引:15;背景颜色:红色;}#popupContainer *{边框:1px纯蓝色;背景颜色:白色;}
<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>
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.
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() {
//???
});
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();
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>
这篇关于如何在 flex 盒中淡入淡出?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!