使用JavaScript填充div中的文本，但动画仅应用于第一个文本

我正在尝试创建一个登录页，其中一系列文本显示在屏幕上并不断旋转。此外，这些文本需要具有类似打字机的动画效果。我有文本工作的动画，但它只适用于第一个文本。当循环浏览其余文本时，它们只显示在页面上。你知道如何解决这个问题吗？我想尝试为每一次文本刷新添加带有JavaScript的动画CSS，但这似乎很麻烦，也不是最有效的方法

document.addEventListener（'DOMContentLoaded'，函数（事件）{
//在打字机中输入文本的数组
var dataText=[“嗨，我是内德”，“开发者”，“作者]；
多功能打字机（一）{
//向h1添加下一个文本
document.querySelector（“h1”）.innerHTML=dataText[i]+''；
//请稍等片刻，然后再次调用此函数以获取下一个文本
setTimeout（函数（）{
打字机（（i+1）%3）
}, 10000);
}
//启动文本动画
打字机（0）；
});
。打字机h1{
字体大小：粗体；
颜色：#000；
字体系列：“Lucida控制台”；
字号：2em；
溢出：隐藏；
/*在动画之前隐藏内容*/
右边框：.1米纯白；
/*光标*/
空白：nowrap；
/*保持文本在同一行*/
保证金：0自动；
/*键入时的滚动效果*/
字母间距：.1米；
动画：键入3s步（30，结束），闪烁插入符号。75s步（1，结束）无限交替；
}
/*打字效果*/
@关键帧键入{
从{
宽度：0
}
到{
宽度：100%
}
}
/*打字机光标效应*/
@关键帧闪烁插入符号{
从…起
到{
边框颜色：透明
}
50% {
边框颜色：白色；
}
}
这里的问题是，一旦CSS动画完成，该元素就不会再次触发。实现重复的唯一方法是从该元素中删除css类（带有动画），等待一段时间，然后读取它，或者销毁该元素并重新创建它

例如，我只需创建一个新的
h1
-元素，编辑其内容并将其添加到DOM中。使用jQuery，您可以轻松地使用

var h = $("<h1>");           //creating the element
h.innerHTML = ...;
$(".typewriter").empty();    //remove all children
$(".typewriter").append(h);  //add new h1 element


还请注意，通过选择查询选择器的方式，这些更改将应用于所有
元素。
我想我可以实现您想要的。请查看：


var-dataText=[“嗨，我是内德”，“开发者”，“作者]；
多功能打字机（一）{
//向h1添加下一个字符
var h1=document.createElement（“h1”）；
h1.innerHTML=数据文本[i]+''；
文档查询选择器（“打字机”）。追加（h1）；
//请稍等片刻，然后再次调用此函数以获取下一个字符
setTimeout（函数（）{
document.querySelector（“.typewriter”）.innerHTML=''；//添加if（i==2）以显示整个短语
打字机（（i+1）%3）
}, 10000);
}
//启动文本动画
打字机（0）
。打字机h1{
字体大小：粗体；
颜色：橙色；
字体系列：“Lucida控制台”；
字号：7em；
溢出：隐藏；/*在动画之前隐藏内容*/
右边框：.1em纯白；/*光标*/
空白：nowrap；/*将文本保持在同一行*/
边距：0自动；/*键入时的滚动效果*/
字母间距：.1米；
动画：
键入3s步骤（30，结束），
闪烁插入符号。75s步（1，结束）无限交替；
}
/*打字效果*/
@关键帧键入{
从{
宽度：0
}
到{
宽度：100%
}
}
/*打字机光标效应*/
@关键帧闪烁插入符号{
从，到{
边框颜色：透明
} 50% { 
边框颜色：白色；
}
}
您可以使用JQuery使其更简单，我还添加了一个函数，用于在数据完全显示时停止动画

<script type="text/javascript">
$(function() {
var dataText = [ "Hi, I'm Ned.", "Developer.", "Writer."];
function typeWriter(i) {
 var content = '<h1>' + dataText[i] +'<span aria-hidden="true"></span></h1>'
 $(".typewriter").append(content);
 // wait for a while and call this function again for next character
 var myFunc = setTimeout(function() {
  typeWriter((i + 1)%3)
  }, 10000);
  if (i  == dataText.length - 1) {
   clearTimeout(myFunc);
  }
    }

  // start the text animation
  typeWriter(0);
})
</script>


<div class="jumbotron" id="jumbotron">
    <div class="typewriter">
    </div>
</div>


$（函数（）{
var dataText=[“嗨，我是内德”，“开发者”，“作者]；
多功能打字机（一）{
var content=''+数据文本[i]+''
$（“.typewriter”）.append（内容）；
//请稍等片刻，然后再次调用此函数以获取下一个字符
var myFunc=setTimeout（函数（）{
打字机（（i+1）%3）
}, 10000);
if（i==dataText.length-1）{
清除超时（myFunc）；
}
}
//启动文本动画
打字机（0）；
})

您可以在那里查看：

如果我回答了您的问题，请告诉我。
您可以将动画设置为无限长，并将动画的长度更改为文本更改之间所需的延迟，然后将其设置为3秒后完成（此处为30%），或者您希望单个动画持续多长时间：

.typewriter h1 {
    ...
    animation:
        typing 10s steps(30, end) infinite,
        blink-caret .75s steps(1, end) infinite alternate;
}

@keyframes typing {
   0% {
     width: 0;
   }
   30% {
     width: 100%;
   }
}

这种方法的缺点是，如果要更改文本之间的延迟长度，必须修改JavaScript延迟和CSS动画长度


.typewriter h1 {
    ...
    animation:
        typing 10s steps(30, end) infinite,
        blink-caret .75s steps(1, end) infinite alternate;
}

@keyframes typing {
   0% {
     width: 0;
   }
   30% {
     width: 100%;
   }
}