CSS动画一个接一个地应用于元素？ [英] CSS Animation to apply to elements one after the other?
问题描述
我试图在我的项目中使用CSS动画。
一切正常。但是，当我运行我的代码时，CSS动画会同时应用于类 .allPro 的所有元素。
有什么办法可以单独应用CSS动画吗？
例如，让第一个元素出现，然后是第二个元素，然后是第三个元素，等等等等？
这是我在 FIDDLE a>
这是我的CSS代码：
.allPro {
width：150px;
height：150px;
float：left;
margin：5px;
背景颜色：＃000;
动画：fadein 2s;
}
@keyframes fadein {
from {opacity：0}
to {opacity：1}
}
元素是动态创建的。所以我无法预测页面上会有多少元素。
我愿意使用jQuery来实现我想要做的事。
编辑：
这是我在页面上动态创建的元素并将它们附加到容器的方式：
$（document）.ready（function（）{
var poutput = $（'。dotted-list'）;
$ .ajax（{
url：'https://mydonain.com/page.php'，
dataType：'jsonp'，
jsonp：'jsoncallback'，
timeout：5000，
成功：函数（数据，状态）{
$ .each（数据，函数（pi，item）{
str = item.name;
if str.length> 2）str = str.substring（0，2）
var products ='< a class =allProdata-id ='+ item.id +'data-name = '+ item.name +'data-type ='+ item.type +'href =data-transition =slidefade>'+'< div class =products-feed-Small >'+'< div style =position：absolute; top：40％; text-align：center; width：100％; color：#fff; FONT-FAMILY：Walpurga;字体大小：28px;字体重量：粗体; text-decoration：none;>'+ item.name +'< / div>'
+'< img src =62.jpg>'+'< / （< / a>'）;
poutput.append（products）;
$（'。allPro'）。each（function（）{
var delay = $（ this）.index（）;
$（this）.css（'animation-delay'，delay +'s'）;
}）;
// $（＃load-更多）.show（）;
}）;
}，
错误：function（）{
poutput.text（'加载数据时出错。'） ;
}
}）;
}）;
index ，然后设置 animation-delay 就像它在下面的代码片段中一样。 一个要注意的关键是我向动画添加了。这是因为通常元素将保持默认状态，直到动画的延迟计时器到期。在这种情况下，默认状态是向后（ animation-fill-mode ） opacity：1 （因为上没有）。它意味着所有的元素一次变得可见，然后当动画开始时，它们就会闪烁。 opacity .allPro
通过设置向后作为填充模式，我们指示UA在延迟期间元素应该保持如第一个关键帧所述。这个改变意味着元素一被追加就会得到 opacity：0 设置（因为 animation 默认选择器）。所以，他们开始出现，只有当动画实际发生，而不是之前。
$（document）.ready（function（）{for（var i = 0; i <10; i ++）{$（'body'）。append（'< div class =allPro><< （）; / div>'）;} $（'。allPro'）。each（function（）{var delay = $（this）.index（）; $（this）.css（'animation-delay'，delay +' '）;}）;}）;
{width：150px; height：150px;向左飘浮; margin：5px; background-color：＃000;动画：fadein 2s向后;} @关键帧fadein {从{opacity：0}到{opacity：1}}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> ;
I'm trying to use the CSS animation in my project.
everything works as it should. However, when I run my code, the CSS animation get applied to all the elements with the class .allPro at the same time.
Is there any way to apply the CSS animation individually?
For example, make the first element appear and then the second one and then third one and so on and so forth?
This is my code on FIDDLE
And this is my CSS code:
.allPro {
width:150px;
height:150px;
float:left;
margin:5px;
background-color:#000;
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
The elements are created dynamically. So I cannot predict how many elements would be on the page.
I am willing to use jQuery to achieve what I'm trying to do.
EDIT:
This is how I get the elements created dynamically on my page and append them to the container:
$(document).ready(function() {
var poutput = $('.dotted-list');
$.ajax({
url: 'https://mydonain.com/page.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status) {
$.each(data, function(pi, item) {
str = item.name;
if (str.length > 2) str = str.substring(0, 2)
var products = '<a class="allPro" data-id="' + item.id + '" data-name="' + item.name + '" data-type="' + item.type + '" href="" data-transition="slidefade">' + '<div class="products-feed-Small">' + '<div style="position:absolute; top:40%; text-align:center; width:100%; color:#fff; font-family:Walpurga; font-size:28px; font-weight:bold; text-decoration: none;">' + item.name + '</div>'
+'<img src="62.jpg" >' + '</div>' + '</a>';
poutput.append(products);
$('.allPro').each(function() {
var delay = $(this).index();
$(this).css('animation-delay', delay + 's');
});
//$( "#load-more" ).show();
});
},
error: function() {
poutput.text('There was an error loading the data.');
}
});
});
One way to do this with jQuery (or JavaScript) would be to find the index of the element and then set the animation-delay based on it like in the below snippet.
One key thing to note is that I've added backwards (animation-fill-mode) to the animation. This is required because generally elements will remain in the default state until the animation's delay timer expires. In this case the default state is opacity: 1 (as there is no opacity setting on .allPro). It means all elements become visible at once and then when the animation actually starts, they blink.
By setting backwards as fill mode, we are instructing the UA that during the delay period the elements should hold the state as mentioned in the first keyframe. This change means that the elements get the opacity: 0 setting as soon as they are appended (because animation is added in default selector). So, they start to appear only when the animation is actually happening and not before it.
$(document).ready(function() {
for (var i = 0; i < 10; i++) {
$('body').append('<div class="allPro"></div>');
}
$('.allPro').each(function() {
var delay = $(this).index();
$(this).css('animation-delay', delay + 's');
});
});
.allPro {
width: 150px;
height: 150px;
float: left;
margin: 5px;
background-color: #000;
animation: fadein 2s backwards;
}
@keyframes fadein {
from {
opacity: 0
}
to {
opacity: 1
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
这篇关于CSS动画一个接一个地应用于元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
