如何在不分隔跨度字母的情况下对文本进行动画处理

how to animate text without dividing letters in spans?

本文关键字：文本 情况下 处理 动画 分隔      更新时间：2023-09-26

我正在尝试动态地对元素中的文本进行动画处理，但我找不到一种方法，到目前为止我尝试过 https://jsfiddle.net/yup55u9f/3/但这不是最好的方法。

我已经尝试了一些方法，例如将文本split数组并在 SPAN 中推送字母，但它不起作用。

var i = -1,
    spn = document.querySelectorAll('.spn'),
    stInt;
var setTO = setTimeout(function AnimTxt() {
  stInt = setInterval(function () {
    if (i <= spn.length) {
      i += 1;
      $('.spn').eq(i).css({
        color: "red",
        marginTop: "-10px"
      });
      return false;
    }
  }, 100);
}, 2000);
.spn {
    position: absolute;
    transition: all 1s ease;
    top: 8px;
    left: 5px;
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-top: 40px;
}
.spn:nth-of-type(2) {
    left: 16px
}
.spn:nth-of-type(3) {
    left: 27px
}
.spn:nth-of-type(4) {
    left: 42px
}
p {
  margin-top: 30px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<span class="placeholder-cont">
    <span class="spn">t</span>
    <span class="spn">e</span>
    <span class="spn">x</span>
    <span class="spn">t</span>
</span>

我现在尝试将字母分成span标签。至于这个 - 不分离新元素会更好 - 我找不到一种方法来实现这一点而不将字母分成span.

for (i = 0; i < text.length; i++) {
   $(".placeholder-cont").append("<span class='spn'>" + text[i] + "</span>");
}

然后使用.each()和setTimeout()而不是setInterval对它们进行动画处理 

$(".spn").each(function(index, el) {
  setTimeout(function() {
    $(el).css({
      color: "red",
      marginTop: "-10px"
    });
    if (index == (text.length - 1)) {
      setTimeout(function() {
        $('p').show();
      }, 1000);
    }
  }, 100 * index);
});

请参考这个小提琴。

编辑

为了删除我添加到span标签position: absolute -

display: inline-block;

然后使用"转换"属性进行动画处理。

更新的小提琴。

这是另一种方法。您可以使用split()从字母创建数组，然后使用 map() 和 replace() 将每个字母包装在span中，然后join()返回到字符串。

$('.text').html($('.text').text().split('').map(function(e) {
  return e.replace(/[^ ]/g, "<span class='letter'>$&</span>");
}).join(''));
$('.text .letter').each(function(i) {
  setTimeout(() => {
    $(this).css({
      'transform': 'translateY(-50px)',
      'color': 'red'
    });
  }, 100 * i);
})
.text {
  font-size: 25px;
  text-transform: uppercase;
}
.letter {
  margin-top: 50px;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Lorem ipsum dolor.</div>

相关文章：