需要仅使用CSS下推div [英] Need divs to be push down using only CSS
本文介绍了需要仅使用CSS下推div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有使用jQuery的这段代码,但是我想知道仅使用CSS就能达到相同的结果。这是我在Codepen上的代码: https://codepen.io/dj-smoke-starboy/pen/REOgvj。
I have this code that is using jQuery, but I want to know is is possible to achieve the same result using only CSS. This is my code on Codepen: https://codepen.io/dj-smoke-starboy/pen/REOgvj.
我正在研究它,但是直到现在,我还不能仅通过使用CSS来使其起作用。
I'm work on it but until now, I was not able to make it work just by using only css.
$('.card').each(function(i) {
$(this).fadeOut(1).delay(1000 * i).fadeIn(100)
});
body {
background-color: #ddd;
padding: 1em;
}
.cardWrap {
display: flex;
flex-direction: column-reverse;
}
.card {
background: #fff;
animation: slide 0.5s linear both;
margin-bottom: 1em;
opacity: 0;
padding: 5px;
transform: translateY(-5vh);
}
@keyframes slide {
0% {
filter: blur(1em);
opacity: 0;
}
100% {
filter: blur(0);
opacity: 1;
transform: translateY(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cardWrap">
<div class="card">pushed DOWN</div>
<div class="card">10 - Itin</div>
<div class="card">9 - Itin</div>
<div class="card">8 - Itin</div>
<div class="card">7 - Itin</div>
<div class="card">6 - Itin</div>
<div class="card">5 - Itin</div>
<div class="card">4 - Itin</div>
<div class="card">3 - Itin</div>
<div class="card">2 - Itin</div>
<div class="card">1 - Itin</div>
</div>
使用JS和jQuery来获得与我相同的结果。
To achieve the same result that I'm getting by using JS and jQuery.
推荐答案
我再次做了:)
body {
background-color: #ddd;
padding: 1em;
}
.cardWrap {
display:flex;
flex-direction:column-reverse;
}
.card {
background:#fff;
animation: slide 0.5s linear both;
margin-bottom: 0;
opacity: 0;
padding:0;
height:0px;
width:0px;
}
.card:nth-child(1) {
animation: card1 .3s forwards .5s;
}
.card:nth-child(2) {
animation: card1 .3s forwards 1.5s;
}
.card:nth-child(3) {
animation: card1 .3s forwards 2.5s;
}
.card:nth-child(4) {
animation: card1 .3s forwards 3.5s;
}
.card:nth-child(5) {
animation: card1 .3s forwards 4.5s;
}
.card:nth-child(6) {
animation: card1 .3s forwards 5.5s;
}
.card:nth-child(7) {
animation: card1 .3s forwards 6.5s;
}
.card:nth-child(8) {
animation: card1 .3s forwards 7.5s;
}
.card:nth-child(9) {
animation: card1 .3s forwards 8.5s;
}
.card:nth-child(10) {
animation: card1 .3s forwards 9.5s;
}
.card:nth-child(11) {
animation: card1 .3s forwards 10.5s;
}
@keyframes card1{
to{opacity:1;height:auto;width:auto;padding:5px;margin-bottom: 1em;}
}
<div class="cardWrap">
<div class="card">pushed DOWN</div>
<div class="card">10 - Itin</div>
<div class="card">9 - Itin</div>
<div class="card">8 - Itin</div>
<div class="card">7 - Itin</div>
<div class="card">6 - Itin</div>
<div class="card">5 - Itin</div>
<div class="card">4 - Itin</div>
<div class="card">3 - Itin</div>
<div class="card">2 - Itin</div>
<div class="card">1 - Itin</div>
</div>
这篇关于需要仅使用CSS下推div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文