Question

我正在尝试以以下方式创建侧边栏动画效果：

<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代码，但是问题在于，如何以slide-out动画效果一次延迟地一次显示每个文本？循环应该无限次地工作。

Answer 1

通过使用CSS关键帧动画使其简单。

下面是一个例子。

body{
    font-family:calibri;
  }
.codinfox-changing-keywords{
  vertical-align:top;
  overflow:hidden;
  height:20px;
  position:relative;
  display: inline-block;
    width: 250px;
}
.hidden{
  position:absolute;
  top: 20px;
  display:inline-block;
  width:250px;
    opacity:0;
  animation: slideme 8s infinite;
}
.hidden:nth-child(3){
  animation-delay: 2s;
}
.hidden:nth-child(5){
  animation-delay: 4s;
}
.hidden:nth-child(7){
  animation-delay: 6s;
}

@keyframes slideme {
  0% {
    top: 20px;
    opacity:0;
  }
  5% {
    top: 0px;
    opacity:1;
  }
  10%{
    top : 0;
    opacity:1;
  }
  20%{
    opacity:1;
  }
  25% {    
  opacity:0.1;
    top : 0;
  }
  30% {
    opacity:0;
    top: 20px;
  }
}

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

您也可以here对其进行测试！

Answer 2

首先，您需要对HTML进行一些处理。 <strong>标签不应该用来设置元素的样式，更不用说<b>标签了。下面是我的代码版本。首先是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>

我可以自由地更改类名并删除一些我认为在这里不必要的标记。现在，JavaScript：

const changingKeywords = document.querySelectorAll('span.changing-keyword');
const keywordsToggle = setKeywordsToggle(changingKeywords);

function setKeywordsToggle (keywords) {
    let index = 0;
  return setInterval(() => {
    keywords[index].classList.remove('shown');
    if (++index >= keywords.length) 
        index = 0;
    keywords[index].classList.add('shown');
  }, 2000);
}

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

最后，示例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.querySelectorAll('span.changing-keyword');
const keywordsToggle = setKeywordsToggle(changingKeywords);

function setKeywordsToggle (keywords) {
	let index = 0;
  return setInterval(() => {
  	keywords[index].classList.remove('shown');
    if (++index >= keywords.length) 
    	index = 0;
    keywords[index].classList.add('shown');
  }, 2000);
}

.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;
}

<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>

Answer 3

我又快又肮脏，看起来像这样。

// 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过渡中处理。

Answer 4

这是我终于想通的东西！

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);

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

4 个答案: