javascript - jQuery:不同文本长度的 CSS 文本动画

Question

这是我的动画:

.ani span {
  animation: animation 1s infinite;
  display: inline-table;
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }
  33.333% {
    transform: translateY(-5px);
  }
  66.666% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.ani span:nth-child(1) {
  animation-delay: .1s;
}

.ani span:nth-child(2) {
  animation-delay: .2s;
}

.ani span:nth-child(3) {
  animation-delay: .3s;
}

.ani span:nth-child(4) {
  animation-delay: .4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="ani"><span>h</span><span>e</span><span>l</span><span>l</span><span>o</span></div>

我将有不同的文本(不仅仅是“hello”)应该有这个动画。所以如果能将它作为 jQuery 函数就太好了。这里应该计算出文本长度，自动放置<span></span> ，以及配件animation-delay .

如何编写代码？

非常感谢您的帮助。

Answer 1

你可以这样做:

var div, aniDivs, i,j;
aniDivs = document.querySelectorAll("div.ani");

for (var i = 0, len = aniDivs.length; i < len; i++) {
  div = document.querySelectorAll("div.ani")[i];
  let span = "";
  for (j = 0; j < div.innerText.length; j++) {
    if (div.innerText[j] !== " ") {
      span += "<span style='animation-delay:." + (j + 1) + "s'>";
      span += div.innerText[j];
      span += "</span>";
    }
  }
  div.innerHTML = span;
}

.ani span {
  animation: animation 1s infinite;
  display: inline-table;
}

@keyframes animation {
  0% {
    transform: translateY(0px);
  }
  33.333% {
    transform: translateY(-5px);
  }
  66.666% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.ani span:nth-child(1) {
  animation-delay: .1s;
}

.ani span:nth-child(2) {
  animation-delay: .2s;
}

.ani span:nth-child(3) {
  animation-delay: .3s;
}

.ani span:nth-child(4) {
  animation-delay: .4s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ani">Welcome</div>
<div class="ani">again</div>

对于这个答案，我合并了这个答案 How to wrap each character from a string in spans由 Danny Fardy Jhonston Bermúdez 提供。