文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在不分隔字母的情况下动画文本？

问如何在不分隔字母的情况下动画文本？
EN

Stack Overflow用户

提问于 2016-04-23 03:13:12

回答 2查看 320关注 0票数 2

我正在尝试动态地动画元素中的文本，但是我找不到一种方法来做到这一点，到目前为止，我尝试过的是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>

javascript

jquery

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-04-23 03:44:10

我现在试着把字母分离成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);
});

请参考这个小提琴。

编辑

为了删除position: absolute，我添加了跨标记-

display: inline-block;

然后使用“transform”属性动画。

Stack Overflow用户

发布于 2016-08-07 14:31:30

这是另一种方法。您可以使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36806228

复制

相似问题

问如何在不分隔字母的情况下动画文本？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不分隔字母的情况下动画文本？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在不分隔字母的情况下动画文本？
EN