0
Wie verzögert man den Übergang für alternative Elemente?
section_swipe = document.querySelectorAll("p.swipe")
section_swipe.forEach((v) => {
setInterval(() => v.classList.toggle('revealed'), 3000)
})p.swipe {
height: auto;
padding: 1vh;
text-align: center;
position: relative;
overflow: hidden;
width: 100%;
}
.bar {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.content {
color: rgba(0, 0, 0, 0);
display: inline-block;
}
.revealed .bar {
transform: translate(100%, 0%) translate3d(0px, 0px, 0px);
background: #232323;
}
.revealed .content {
animation-duration: 1s;
animation-name: reveal_section;
color: #232323;
}
@keyframes reveal_section {
0% {
color: rgba(0, 0, 0, 0);
}
50% {
color: rgba(0, 0, 0, 0);
}
51% {
color: #232323;
}
100% {
color: #232323;
}
}
.bar:nth-of-type(even) {
transition-delay: 1s;
}
.content:nth-of-type(even) {
animation-delay: 1s;
}<div>
<p class="swipe">
<span class="content">
Hello</span>
<span class="bar"></span>
</p>
<p class="swipe">
<span class="content">World</span><span class="bar"></span>
</p>
</div>Ich mag die Bar Übergang und offenbare Animation für ‚Welt‘ nach einer kurzen Verzögerung beginnen und nicht zur gleichen Zeit wie ‚Hallo‘. Ich habe versucht, nth-of-type, aber es effektiv zu verzögern beide statt nur "Welt". Die Enthüllungsanimation des Inhalts sollte auch mit der Verzögerung für den Balken synchron sein. Es muss für mehrere Elemente arbeiten, nicht nur für zwei.