我正在尝试复制此链接中提到的动画。
http://tobiasahlin.com/moving-letters/#13
不同之处在于，一旦淡出和过渡动画完成，我需要更改内容并将其替换为新内容。
我尝试使用anime js's完整功能更改文本。
看看代码。
var styleindex = 0;
var stylearray = ["SEO","SMM"];
function eachletter(){
$('.l1').each(function(){
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});
}
eachletter();
anime.timeline({loop: true})
.add({
targets: '.l1 .letter',
translateY: [100,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1400,
delay: function(el, i) {
return 300 + 30 * i;
}
}).add({
targets: '.l1 .letter',
translateY: [0,-100],
opacity: [1,0],
easing: "easeInExpo",
duration: 1200,
delay: function(el, i) {
return 100 + 30 * i;
},
complete: function(anim) {
$(".l1").text(stylearray[styleindex]);
eachletter(); …