如何在for循環中為文本設置動畫？

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> 

您也可以在這里進行測試！

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（）函數，並將其分配給keywordToggle變量。 這樣，如果我想停止動畫，可以通過運行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);