如何在javascript中为打字文本效果设置动画[重复]

Question

编写了一些脚本来提供输入文本的效果，但我希望每个字符都淡入。我尝试添加 x.style.opacity 并通过 Id 获取元素，但这改变了整个事情有没有办法针对个人人物？这是我的代码：

var i = -1; 
var string = "BREAKING NEWS "
var array = string.split("");   


function Next(){
i++;   
if(i > (array.length - 1)){      
    i = 0;                            
}
setTimeout('Slide()',50);
 }


 function Slide(){
x = document.getElementById('test')
x.innerHTML += array[i];

setTimeout('Next()',50); 

}

Answer 1

您不能针对需要将它们包装在标签中的单个字符，例如 span：

DEMO

function Slide() {
    var sp = document.createElement('span');
    sp.setAttribute('class', 'fadein');
    sp.appendChild(document.createTextNode(array[i]));
    x.appendChild(sp);
    setTimeout('Next()', 50);
}

您可以使用 css 动画为它们制作动画

.fadein {
    animation: fadein 2s;
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}