如何在 flex box 中淡入淡出?
how fade in a flex box?
如何让弹性框在淡入之前不属于页面?我曾经使用 'display: 0;' 执行此操作,然后使用 jQuery .fadeIn()。但是现在如果我将显示设置为 0,当我淡入时,我当然会失去盒子的灵活性。如果我使用 jQuery 将显示设置为 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() {
//???
});
您可以将不透明度设置为 0 并设置动画:
$('#popupContainer').animate({
opacity: 1
}, 'fast');
看起来有点奇怪,但是你可以做的是在css中,将它设置为display: none
。然后诀窍是将 display
设置为 flex
在你的 jquery 然后再次隐藏它,然后 fadeIn
:
CSS:
#popupContainer {
/* ... */
display:none;
flex-direction: row;
flex-wrap: wrap;
/* ... */
}
JS:
$("#popupContainer")
.css("display", "flex")
.hide()
.fadeIn();
这是可行的,因为 fadeIn()
会将项目设置回其之前的非隐藏值 display
。因此设置 flex
并重新隐藏它会将此 "default" 设置回
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>
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>
最简单和最干净的方法(如果你可以编辑 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();
如何让弹性框在淡入之前不属于页面?我曾经使用 'display: 0;' 执行此操作,然后使用 jQuery .fadeIn()。但是现在如果我将显示设置为 0,当我淡入时,我当然会失去盒子的灵活性。如果我使用 jQuery 将显示设置为 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() {
//???
});
您可以将不透明度设置为 0 并设置动画:
$('#popupContainer').animate({
opacity: 1
}, 'fast');
看起来有点奇怪,但是你可以做的是在css中,将它设置为display: none
。然后诀窍是将 display
设置为 flex
在你的 jquery 然后再次隐藏它,然后 fadeIn
:
CSS:
#popupContainer {
/* ... */
display:none;
flex-direction: row;
flex-wrap: wrap;
/* ... */
}
JS:
$("#popupContainer")
.css("display", "flex")
.hide()
.fadeIn();
这是可行的,因为 fadeIn()
会将项目设置回其之前的非隐藏值 display
。因此设置 flex
并重新隐藏它会将此 "default" 设置回
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>
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>
最简单和最干净的方法(如果你可以编辑 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();