![fadeIn]( "fadeIn")
本文介绍了CSS列表逐渐淡入，数量未知的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图使用普通的CSS逐渐淡入淡出，并且在列表中没有jquery，所以它可以一个接一个地淡入淡出。但是，我只知道如何在有限的名单中做到这一点。
以下是我所做的：
-webkit-animation：fadeIn 0.9s 1;动画：fadeIn 0.9s 1; -webkit-animation-fill-mode：forwards; animation-fill-mode：forwards;}。ladder：第n个孩子（5n + 1）{-webkit-animation-delay：0.2s;动画延迟：0.2s;}。梯子：nth-child（5n + 2）{-webkit-animation-delay：0.4s;动画延迟：0.4s;}。梯子：nth-child（5n + 3）{-webkit-animation-delay：0.6s;动画延迟：0.6s;}。梯子：nth-child（5n + 4）{-webkit-animation-delay：0.8s;动画延迟：0.8s;}。梯子：nth-child（5n + 5）{-webkit-animation-delay：1.0s; animation-delay：1.0s;} @ - webkit-keyframes fadeIn {0％{opacity：0.0; } 100％{不透明度：1.0; }} @关键帧fadeIn {0％{opacity：0.0; } 100％{不透明度：1.0; }
< li class =ladder> < / li>< li class =ladder> B< / li>< li class =ladder> C< / li>< li class =ladder> D< / li> < li class =ladder> E< / li>
p>我的问题：如何让css工作，无论有多少列表。 解决方案
使用允许您减少代码的CSS变量。它不是通用的，但是为每个 li 添加一个简单的内联CSS要比编写复杂的CSS更简单： b
$ b .ladder {opacity：0; animation：fadeIn 1s var（ - d）forwards;} @ keyframes fadeIn {100％{opacity：1; }}
< ul> < li style = - d：0sclass =ladder> A< / li> < li style = - d：0.2sclass =ladder> B< / li> < li style = - d：0.4sclass =ladder> C< / li> < li style = - d：0.6sclass =ladder> D< / li> < li style = - d：0.8sclass =ladder> E< / li>< / ul>
以下是另一个想法，您可以在 ul 上应用动画：
ul {position：relative;} ul：before {content：;位置：绝对的;顶部：-20px;底部：0;左：0;右：0;背景：线性渐变（到底部，透明，＃fff 20px）;动画：fadeIn 2s转发} @keyframes fadeIn {0％{top：-10px; } 100％{top：100％; }} < ul> <李>一种与LT; /锂> <李> B< /锂> <李>℃下/锂> <李> d< /锂> < li> E< / li>< / ul>
I was trying to make a gradual fadein using normal CSS and no jquery on a list so it can fade in one-by-one. However, I only know how to do it in a limited amount of list. How do I loop the css so no matter how much list I have it still works.
Here is what I have done:
.ladder {
opacity: 0;
-webkit-animation: fadeIn 0.9s 1;
animation: fadeIn 0.9s 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.ladder:nth-child(5n+1) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.ladder:nth-child(5n+2) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.ladder:nth-child(5n+3) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.ladder:nth-child(5n+4) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.ladder:nth-child(5n+5) {
-webkit-animation-delay: 1.0s;
animation-delay: 1.0s;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@keyframes fadeIn {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
<li class="ladder">A</li>
<li class="ladder">B</li>
<li class="ladder">C</li>
<li class="ladder">D</li>
<li class="ladder">E</li>
My question: How to make the css to work on no matter how much list there is.
解决方案
Here is an idea using CSS variable that allow you to reduce the code. It's not generic but it's more easier to append a simple inline CSS to each li than writing complex CSS:
.ladder {
opacity: 0;
animation: fadeIn 1s var(--d) forwards;
}
@keyframes fadeIn {
100% {
opacity: 1;
}
}
<ul>
<li style="--d:0s" class="ladder">A</li>
<li style="--d:0.2s" class="ladder">B</li>
<li style="--d:0.4s" class="ladder">C</li>
<li style="--d:0.6s" class="ladder">D</li>
<li style="--d:0.8s" class="ladder">E</li>
</ul>
Here is another idea where you can apply an animation on the ul:
ul {
position:relative;
}
ul:before {
content:"";
position:absolute;
top:-20px;
bottom:0;
left:0;
right:0;
background:linear-gradient(to bottom,transparent,#fff 20px);
animation:fadeIn 2s forwards
}
@keyframes fadeIn {
0% {
top:-10px;
}
100% {
top: 100%;
}
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
这篇关于CSS列表逐渐淡入，数量未知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
09-01 15:18