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種類型，但它有效地延遲了這兩者，而不僅僅是「世界」。內容的揭示動畫也應該與延遲欄同步。它需要爲多個元素工作，而不僅僅是兩個元素。