如何延迟交替元素的过渡？答案

【问题标题】：How to delay transition for alternate elements?如何延迟交替元素的过渡？
【发布时间】：2017-08-28 21:39:06
【问题描述】：

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>

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

【问题讨论】：

标签： html css css-transitions css-animations

【解决方案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;
}

堆栈sn-p

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>

【讨论】：