Javascript 如何在for循环中设置文本动画？

我正在尝试创建一个边栏动画效果，如下所示：

<div class="sidebar-description sidebar-personal-info-section">
    A passionate
    <span class="changing-keywords" id="change">
        <strong>
            <b class="hidden">software engineer</b>
            <b class="hidden">lifelong learner</b>
            <b class="hidden">blogger</b>
            <b class="hidden">traveller</b>
        </strong>
    </span><br>
</div>

热情的

软件工程师
终身学习者
博客作者
旅行者

---

我已经编写了HTML代码，但问题是我应该如何使用

滑出

动画效果一次显示一个文本，并且有很小的延迟？循环应该可以无限次地工作。

我的快速和肮脏看起来像这样

// add rotate to Array
Array.prototype.rotate = function(n) {
    return this.slice(n, this.length).concat(this.slice(0, n));
}

// setup array
const jobs = ['employee', 'manager'];

// rotate jobs function
const rotateJobs = () => {
    document.querySelector('#id').innerHtml = jobs.rotate(1).shift();
}

// set interval
setInterval(rotateJobs, 1000);

---

淡入/幻灯片动画应该在css转换中处理。

我的快速和肮脏看起来像这样

// add rotate to Array
Array.prototype.rotate = function(n) {
    return this.slice(n, this.length).concat(this.slice(0, n));
}

// setup array
const jobs = ['employee', 'manager'];

// rotate jobs function
const rotateJobs = () => {
    document.querySelector('#id').innerHtml = jobs.rotate(1).shift();
}

// set interval
setInterval(rotateJobs, 1000);

---

淡入/幻灯片动画应该在css转换中处理。

这是我最终发现的

var title = ['software engineer', 'tech blogger', 'traveller', 'lifelong learner'];

var i = 0;  // the index of the current item to show

setInterval(function() {            // setInterval makes it run repeatedly
  document
    .getElementById('change')
    .innerHTML = title[i++];    // get the item and increment
  if (i == title.length) i = 0;   // reset to first element if you've reached the end
}, 2000); 

---

这就是我最终发现的

var title = ['software engineer', 'tech blogger', 'traveller', 'lifelong learner'];

var i = 0;  // the index of the current item to show

setInterval(function() {            // setInterval makes it run repeatedly
  document
    .getElementById('change')
    .innerHTML = title[i++];    // get the item and increment
  if (i == title.length) i = 0;   // reset to first element if you've reached the end
}, 2000); 

---

首先，您需要在HTML上做一些工作。

标记不应用于设置元素的样式，更不用说

标记了。下面是我的代码版本。首先是HTML：

<div class="codinfox-sidebar-description sidebar-personal-info-section">
    A passionate
    <span class="changing-keyword shown">software engineer</span>
    <span class="changing-keyword">lifelong learner</span>
    <span class="changing-keyword">blogger</span>
    <span class="changing-keyword">traveller</span>
</div>

请注意，我实际上返回setInterval（）函数，并将其分配给关键字切换变量。这样，如果我想停止动画，我可以通过运行clearInterval（）轻松地停止动画。代码在找到的所有关键字之间切换，并将显示的类指定给由索引变量的值确定的元素

最后，示例CSS：

.sidebar-personal-info-section {
  position: relative;
}

.changing-keyword {
  font-weight: bold;
  opacity: 0;
  transition: opacity 1s, visibility 1s;
  visibility: collapse;
  position: absolute;
  padding-left: .2rem;
}

.shown {
  opacity: 1;
  visibility: visible;
}

请注意可见性转换，它实际上是转换延迟。除此之外，我必须使用position属性来确保每个关键字都位于“激情”单词附近，否则每个单词都会显示在其原始位置（我没有使用display:none，因为它不可设置动画）

工作示例：

const changingKeywords=document.queryselectoral（'span.changing关键字'）；
const keywordsToggle=设置关键字stoggle（更改关键字）；
函数设置关键字切换（关键字）{
设指数=0；
返回设置间隔（（）=>{
关键词[index].classList.remove（'显示'）；
如果（++索引>=关键字.length）
指数=0；
关键词[index].classList.add（'显示'）；
}, 2000);
}

。侧栏个人信息部分{
位置：相对位置；
}
.更改关键字{
字体大小：粗体；
不透明度：0；
过渡：不透明度1s，可见性1s；
能见度：塌陷；
位置：绝对位置；
左侧填充：.2rem；
}
.显示{
不透明度：1；
能见度：可见；
}

热情的
软件工程师
终身学习者
博客作者
旅行者

首先，您需要在HTML上做一些工作。

标记不应用于设置元素的样式，更不用说

标记了。下面是我的代码版本。首先是HTML：

<div class="codinfox-sidebar-description sidebar-personal-info-section">
    A passionate
    <span class="changing-keyword shown">software engineer</span>
    <span class="changing-keyword">lifelong learner</span>
    <span class="changing-keyword">blogger</span>
    <span class="changing-keyword">traveller</span>
</div>

请注意，我实际上返回setInterval（）函数，并将其分配给关键字切换变量。这样，如果我想停止动画，我可以通过运行clearInterval（）轻松地停止动画。代码在找到的所有关键字之间切换，并将显示的类指定给由索引变量的值确定的元素

最后，示例CSS：

.sidebar-personal-info-section {
  position: relative;
}

.changing-keyword {
  font-weight: bold;
  opacity: 0;
  transition: opacity 1s, visibility 1s;
  visibility: collapse;
  position: absolute;
  padding-left: .2rem;
}

.shown {
  opacity: 1;
  visibility: visible;
}

请注意可见性转换，它实际上是转换延迟。除此之外，我必须使用position属性来确保每个关键字都位于“激情”单词附近，否则每个单词都会显示在其原始位置（我没有使用display:none，因为它不可设置动画）

工作示例：

const changingKeywords=document.queryselectoral（'span.changing关键字'）；
const keywordsToggle=设置关键字stoggle（更改关键字）；
函数设置关键字切换（关键字）{
设指数=0；
返回设置间隔（（）=>{
关键词[index].classList.remove（'显示'）；
如果（++索引>=关键字.length）
指数=0；
关键词[index].classList.add（'显示'）；
}, 2000);
}

。侧栏个人信息部分{
位置：相对位置；
}
.更改关键字{
字体大小：粗体；
不透明度：0；
过渡：不透明度1s，可见性1s；
能见度：塌陷；
位置：绝对位置；
左侧填充：.2rem；
}
.显示{
不透明度：1；
能见度：可见；
}

热情的
软件工程师
终身学习者
博客作者
旅行者

使用CSS关键帧动画使其变得简单

下面是一个例子

正文{
字体系列：calibri；
}
.codinfox更改关键字{
垂直对齐：顶部；
溢出：隐藏；
高度：20px；
位置：相对位置；
显示：内联块；
宽度：250px；
}
.隐藏{
位置：绝对位置；
顶部：20px；
显示：内联块；
宽度：250px；
不透明度：0；
动画：slideme 8s无限；
}
.隐藏：第n个孩子（3）{
动画延迟：2s；
}
.隐藏：第n个孩子（5）{
动画延迟：4s；
}
.隐藏：第n个孩子（7）{
动画延迟：6秒；
}
@关键帧幻灯片{
0% {
顶部：20px；
不透明度：0；
}
5% {
顶部：0px；
不透明度：1；
}
10%{
排名：0；
不透明度：1；
}
20%{
不透明度：1；
}
25% {    
不透明度：0.1；
排名：0；
}
30% {
不透明度：0；
顶部：20px；
}
}

热情的

软件工程师

终身学习者

博主

旅行者

使用CSS关键帧动画使其变得简单

下面是一个例子

正文{
字体系列：calibri；
}
.codinfox更改关键字{
垂直对齐：顶部；
溢出：隐藏；
高度：20px；
位置：相对位置；
显示：内联块；
宽度：250px；
}
.隐藏{
位置：绝对位置；
顶部：20px；
显示：内联块；
宽度：250px；
不透明度：0；
动画：slideme 8s无限；
}
.隐藏：第n个孩子（3）{
安尼