在每個元素及其類上鍵入影片-有解無憂

我正在嘗試制作打字影片，但它不起作用，我不知道為什么。我知道我可以在 CSS 中做到這一點，但我想在 JS 中嘗試一下。問題可能出在函式本身我不是 JS 中最好的。

<p class="typing-animation">this will be animated</p>
<p class="typing-animation">this aswell</p>
<script>
const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

const toType = document.getElementsByClassName("typing-animation");

document.getElementsByClassName("typing-animation").textContent = "";

(async (toType) => {
  for (let each of toType) {
    text = each.textContent;
    each.textContent = "";
    let i = 0;
    for (let every of text) {
      every.textContent  = text[i];
      await sleep(200);
      i  ;
    }
  }
})(toType);
</script>

uj5u.com熱心網友回復：

我想這就是你所追求的？

<p class="typing-animation">this will be animated</p>
<p class="typing-animation">this aswell</p>

<script>
const sleep = (ms) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

// This is an array of html elements, since getElementsByClassName returns an array, since there can be more than one html element with that class.
const elements = document.getElementsByClassName("typing-animation");

(async (typedElements) => {
   let texts = []
   
   for (let element of typedElements){
    // The property to access the text inside the elements .innerHTML, if its a user interactuable element such as <input> or <textarea> then its .value
    texts.push(element.innerHTML);
    element.innerHTML = "";
   }
   
   // texts and typedElements has the same length.
   for (let i = 0; i < texts.length; i  ) {
      for (let character of texts[i]) {
        typedElements[i].innerHTML  = character;
        await sleep(200)
      } 
   }
  
})(elements);
</script>

如果你想在多個地方實作這種效果，并且更容易實作，那么有一個庫已經做到了，更容易定制和使用：Typed.js

<span class="typed"></span>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
  // For more examples check: https://github.com/mattboldt/typed.js
  // Full docs at: https://mattboldt.github.io/typed.js/docs/
  const options = {
    strings: ['This will be typed!', 'This too! ^500 <br> And this will go under!'],
    typeSpeed: 40,
    backSpeed: 40,
    backDelay: 2000,
  };
  
  // We'll bind the typing animation to the .typed class.
  let typed = new Typed('.typed', options);
</script>

uj5u.com熱心網友回復：

你走在正確的道路上。為了便于閱讀，我剛剛清理了一些東西。

這是它的代碼框：https ://codesandbox.io/s/typing-animation-kdn8v

我假設您希望影片并行發生。出于這個原因，我們希望遍歷每個 HTML 元素并animateType在每個元素上呼叫我們的函式，而無需等待。

每種呼叫都animateType意味著有一個針對這個 HTML 元素運行的函式的副本。這樣，text函式內部的, 等變數就不會在 HTML 元素中混淆。這稱為“關閉”。函式“實體”內的所有變數，僅存在于該函式實體內。

我們存盤原始文本，然后清除 HTML 元素的內容，然后像您一樣回圈快取文本的字母，并將每個字母添加到 HTML 元素中。

// Stackoverflow: https://stackoverflow.com/questions/70573442/typing-animation-on-each-element-with-its-class

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const clearAndCache = (elements) => {
  let cachedText = [];
  for (let element of elements) {
    cachedText.push(element.textContent);
    element.textContent = "";
  }
  return cachedText;
};

const animateTypeSync = async (typeables, ms) => {
  const cachedText = clearAndCache(typeables);

  for (let i = 0; i < typeables.length; i  ) {
    for (let character of cachedText[i]) {
      typeables[i].textContent  = character;
      await sleep(ms);
    }
  }
};

const animateTypeAsync = (typeables, ms) => {
  const cachedText = clearAndCache(typeables);

  Array.from(typeables).forEach(async (element, i) => {
    for (let character of cachedText[i]) {
      element.textContent  = character;
      await sleep(ms);
    }
  });
};

const elementsSync = document.getElementsByClassName("typing-animation-sync");
animateTypeSync(elementsSync, 200);

const elementsAsync = document.getElementsByClassName("typing-animation");
animateTypeAsync(elementsAsync, 150);

<!DOCTYPE html>
<html>
  <head>
<title>Typing Animation</title>
<meta charset="UTF-8" />
  </head>

  <body>
<h1>Typing Animations</h1>

<div style="width: 100%; display: inline-flex;">
  <div style="width: 50%;">
    <h2>Async</h2>
    <p class="typing-animation">These will run</p>
    <p class="typing-animation">at the same time</p>
  </div>

  <div style="width: 50%;">
    <h2>Sync</h2>
    <p class="typing-animation-sync">These will animate</p>
    <p class="typing-animation-sync">one at a time</p>
  </div>
</div>
  </body>
  <script src="src/index.js"></script>
</html>

編輯：在 OP 評論后向代碼添加了同步版本。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/405780.html

標籤：

上一篇：如果影片未到達其端點，GSAP是否可以阻止執行“onComplete”？

下一篇：用于案例研究的固定側滾動條