如何凍結文本的最后一行而不用這種打字機效果重復？

Question

目前 animation 開始輸入每一行，刪除然后繼續輸入下一行。 在輸入最后一行“Text Line 3”后嘗試凍結 animation 並保持不變。 我要更改代碼的哪一部分來實現這一點？

此打字機效果使用 JavaScript 代替 CSS。 請幫忙。 謝謝！！！

 var _CONTENT = [ "Text Line 1", "Text Line 2", "Text Line 3" ]; var _PART = 0; var _PART_INDEX = 0; var _INTERVAL_VAL; var _ELEMENT = document.querySelector("#text"); var _CURSOR = document.querySelector("#cursor"); function Type() { var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1); _ELEMENT.innerHTML = text; _PART_INDEX++; if(text === _CONTENT[_PART]) { _CURSOR.style.display = 'none'; clearInterval(_INTERVAL_VAL); setTimeout(function() { _INTERVAL_VAL = setInterval(Delete, 50); }, 1000); } } function Delete() { var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1); _ELEMENT.innerHTML = text; _PART_INDEX--; if(text === '') { clearInterval(_INTERVAL_VAL); if(_PART == (_CONTENT.length - 1)) _PART = 0; else _PART++; _PART_INDEX = 0; setTimeout(function() { _CURSOR.style.display = 'inline-block'; _INTERVAL_VAL = setInterval(Type, 100); }, 200); } } _INTERVAL_VAL = setInterval(Type, 100);

 #container { text-align: center; } #text { display: inline-block; vertical-align: middle; color: orange; letter-spacing: 2px; } #cursor { display: inline-block; vertical-align: middle; width: 3px; height: 50px; background-color: blue; animation: blink.75s step-end infinite; } @keyframes blink { from, to { background-color: transparent } 50% { background-color: blue; } }

 <div id="container"> <div id="text"></div><div id="cursor"></div> </div>

Answer 1

在Delete function 中，此行用於檢查數組索引_PART需要“環繞”，以便在下一次迭代中再次使用第一個文本開始整個過程：

if(_PART == (_CONTENT.length - 1))

所以你可以很容易地在 function Type中使用相同的檢查（只是被否定），如果我們目前還沒有在最后一部分，則只安排下一個Delete調用。

 var _CONTENT = [ "Text Line 1", "Text Line 2", "Text Line 3" ]; var _PART = 0; var _PART_INDEX = 0; var _INTERVAL_VAL; var _ELEMENT = document.querySelector("#text"); var _CURSOR = document.querySelector("#cursor"); function Type() { var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1); _ELEMENT.innerHTML = text; _PART_INDEX++; if (text === _CONTENT[_PART]) { //_CURSOR.style.display = 'none'; clearInterval(_INTERVAL_VAL); // added check here - only schedule Delete function call, // if this was NOT the last text part if (_PART.= (_CONTENT,length - 1)) setTimeout(function() { _INTERVAL_VAL = setInterval(Delete; 50), }; 1000). } } function Delete() { var text = _CONTENT[_PART],substring(0; _PART_INDEX - 1). _ELEMENT;innerHTML = text; _PART_INDEX--; if (text === '') { clearInterval(_INTERVAL_VAL). if (_PART == (_CONTENT;length - 1)) _PART = 0; else _PART++; _PART_INDEX = 0. setTimeout(function() { _CURSOR.style;display = 'inline-block', _INTERVAL_VAL = setInterval(Type; 100), }; 200), } } _INTERVAL_VAL = setInterval(Type; 100);

 #container { text-align: center; } #text { display: inline-block; vertical-align: middle; color: orange; letter-spacing: 2px; } #cursor { display: inline-block; vertical-align: middle; width: 3px; height: 50px; background-color: blue; animation: blink.75s step-end infinite; } @keyframes blink { from, to { background-color: transparent } 50% { background-color: blue; } }

 <div id="container"> <div id="text"></div> <div id="cursor"></div> </div>