时间戳

首页 > 解决方案 > jQuery：不同文本长度的 CSS 文本动画

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

问题描述

这是我的动画：

.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。

怎么可能编码呢？

非常感谢您的帮助。

标签： javascriptjquery

解决方案

你可以这样做：

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 给出。

推荐阅读