Question

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>

我希望条形过渡并显示“世界”的动画在稍微延迟之后开始，而不是与“你好”同时开始。我尝试过使用nth-of-type但它有效地推迟了两者而不仅仅是'世界'。内容的揭示动画也应该与bar的延迟同步。它需要适用于多个元素，而不仅仅是两个元素。

Answer 1

nth-of-type在共享相同父级的兄弟姐妹之间工作，.bar和.content都没有。

如果您定位.swipe，则可以使用

.swipe:nth-of-type(even) .bar {
  transition-delay: 1s;
}

.swipe:nth-of-type(even) .content {
  animation-delay: 1s;
}

Stack snippet

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;
  }
}

.swipe:nth-of-type(even) .bar {
  transition-delay: 1s;
}

.swipe:nth-of-type(even) .content {
  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>

如何延迟替代元素的转换？

1 个答案: