Question

我正在尝试动态地动画元素中的文本，但是我无法找到一种方法来做到这一点，到目前为止我尝试了https://jsfiddle.net/yup55u9f/3/，但它不是最好的方法。

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

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>

Answer 1

我现在尝试将字母分成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);
});

请参阅此fiddle。

修改

要删除position: absolute我已添加到span标记 -

display: inline-block;

然后使用＆＃39;变换＆＃39;进行动画制作。属性。

Updated fiddle.

Answer 2

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

＆＃13;

$('.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);
})

＆＃13;

.text {
  font-size: 25px;
  text-transform: uppercase;
}
.letter {
  margin-top: 50px;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Lorem ipsum dolor.</div>

＆＃13;

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

2 个答案: