我正在尝试为元素中的文本动态设置动画，但是我找不到一种方法可以做到这一点，到目前为止，我还是尝试过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>我现在尝试将字母分成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”属性进行动画处理。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句