Цель:
- Добавить задержку каскадного перехода для каждого
.myClass в пределах родительского элемента .mySection - Если на странице существует несколько родителей, задержка перехода должна начинаться с 0.
Цель:
Чтобы применить один кусок стиля по всему сайту , поэтому каждая анимация в разделе будет воспроизводиться одна за другой в том порядке, в котором они отображаются внутри HTML в хронологическом порядке (сверху вниз) независимо от других вложений, без необходимости добавлять много грязных исправлений .
Проблема:
CSS: Использование nth-child(x) родительского div div breaks требуемый порядок, как только целевой класс будет вложен в новых родителей , преждевременно сбрасывающих задержку.
jQuery: Использование jQuery для выбора каждого .myClass в пределах .mySection задержка анимации не сбрасывается, и каскад продолжается по всей странице.
Как я могу сделать это, чтобы каскадная задержка y сбрасывается с каждым новым .mySection?
Пример фрагмента: я включил обе проблемы для демонстрации
- CSS демо выпуска
.myClass & .mySection - jQuery демоверсия выпуска
.myClass2 & .mySection2
$(".mySection2 .myClass2").each(function(index) {
$(this).css({
'animation-delay': 1 * (1 + index) + 's'
});
});
body {
color: #fff;
font-size: 20px;
text-align: center;
}
@keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
section {
width: 100%;
clear: both;
}
.mySection div {
float: left;
margin: 10px;
height: 100px;
width: 100px;
animation: FadeIn 1s linear;
animation-fill-mode: both;
}
.mySection2 div {
float: left;
margin: 10px;
height: 100px;
width: 100px;
animation: FadeIn 1s linear;
animation-fill-mode: both;
}
.red div {
background: red;
}
.blue div {
background: blue;
}
.green div {
background: green;
}
.pink div {
background: pink;
}
.mySection .myClass:nth-child(1) {
animation-delay: .5s
}
.mySection .myClass:nth-child(2) {
animation-delay: 1s
}
.mySection .myClass:nth-child(3) {
animation-delay: 1.5s
}
.mySection .myClass:nth-child(4) {
animation-delay: 2s
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="mySection blue">
<div class="myClass">1</div>
<div class="myClass">2</div>
<div class="myClass">3</div>
<div class="myClass">4</div>
</section>
<section class="mySection red">
<div class="myClass">1</div>
<span><div class="myClass">2</div></span>
<span><div class="myClass">3</div></span>
<div class="myClass">4</div>
</section>
<section class="mySection2 green">
<div class="myClass2">1</div>
<div class="myClass2">2</div>
<div class="myClass2">3</div>
<div class="myClass2">4</div>
</section>
<section class="mySection2 pink">
<div class="myClass2">1</div>
<span><div class="myClass2">2</div></span>
<span><div class="myClass2">3</div></span>
<div class="myClass2">4</div>
</section>
Источники: