使用 JS 加载 div 的子元素的动画延迟?

Question

我有div，我在里面制作了3张卡片，并将其动画化为滑入。我可以使用第 n 个孩子延迟动画，但我想使用 java 脚本 .children 属性来执行此操作，并将动画延迟应用 --> index + 's' [我的代码] (https://codepen.io/beastop/pen/mdVMNgY(

<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>

Answer 1

你可以将动画精灵到单个类，
像这样：

.CSS

*{
margin:0;
padding:0;
box-sizing:border-box;
}
.container{
display:flex;
flex-direction:column;
}
.card{
width:40px;
height: 40px;
background:black;
margin-bottom: 1em;
}
.slide-anim{
animation: slide 2s ease-out;
transition: transfrom 2s ease;
}
@keyframes slide{
0%{
transform: translatex(-50px);
}
100%{
transform: translatex(0px);
}
}

目录

<div class="container">
<div class="card slide-anim"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<button onclick="toggleSlides()">toggle</button>

.JS

function toggleSlides() {
var cards = document.getElementsByClassName("card");
for (var i = 0; i < cards.length; i++) {
var card = cards[i];
if (card.classList) {
card.classList.toggle("slide-anim");
} else {
// For IE9
var classes = card.className.split(" ");
var i = classes.indexOf("slide-anim");
if (i >= 0) classes.splice(i, 1);
else classes.push("slide-anim");
card.className = classes.join(" ");
}
}
}

你可以使用jQuery快速的方式

jquery动画效果很好

Answer 2

这是使用 jQuery 进行查询的工作解决方案。

$(function(){
var seconds = 0.8;
$('.container').children('.card').css({
"animation": `slide ${seconds}s ease-out`
})
});

*{
margin:0;
padding:0;
box-sizing:border-box;
}
.container{
display:flex;
flex-direction:column;
}
.card{
width:40px;
height: 40px;
background:black;
transition: transfrom 2s ease;
margin-bottom: 1em;
}
@keyframes slide{
0%{
transform: translatex(-50px);
}
100%{
transform: translatex(0px);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>