0
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>我想了吧过渡，揭示了“世界”动画有轻微的延迟之后，而不是在同一时间，“你好”开始。我曾尝试过使用第n种类型，但它有效地延迟了这两者，而不仅仅是“世界”。内容的揭示动画也应该与延迟栏同步。它需要为多个元素工作，而不仅仅是两个元素。