在文本输出动画（HTML、CSS、JS）期间应用文本颜色渐变而不显示 HTML 标签

Question

我有一个在页面加载时加载的文本动画。文本将逐个字符地写入屏幕，我想要一些应用了渐变的单词。我已经能够成功应用渐变，但是，它在第一次到达

span

标签时暂停，然后在暂停后输出带有渐变的每个字符（看似输出每个字符的长度）

我创建了一个最接近要求的工作版本的 CodePen。查看代码：https://codepen.io/Kelly-Gold/pen/oNPJQXo

我设法截取了渐变开始和结束的屏幕截图，这样您就可以看到意想不到的/不需要的 HTML 字符 当该行完成时，输出是我想要的，但它不流畅，并且沿途显示不需要的字符。

输出到达 span 标签时的文本

输出完成渐变并到达结束跨度标签时的文本

输出到达行尾时的文本

我不知道如何在不暂停的情况下使其平滑，并且不显示

span

标签的开头和结尾的字符

要求/期望输出

1. 每行一个字符输出，行尾停顿
2. 有些词可以有渐变
3. 输出在到达渐变词时不会暂停，所以它应该像普通的黑色文本一样流动
4. 运行时不应显示任何 HTML 标记字符

Answer 1

这段代码会检查 letterCount 是否在任何一个的开头

这绝不是完美的。一个问题是，当我们从开始和结束 span 标签之间写出 html 时，我们不包括结束 span 标签。我也打破了眨眼的东西。

const lines = [
  "This is the first line",
  "This is the second line with a <span class='gradient'>gradient</span> word",
  "This is the last line with a <span class='gradient'>gradient</span> word",
];


let lineCount = 0;
let letterCount = 0;
let currentText = "";
let isCursorBlinking = true;

const textElement1 = document.querySelector(".line1");
const textElement2 = document.querySelector(".line2");
const textElement3 = document.querySelector(".line3");

function type() {
  if (letterCount === lines[lineCount].length) {
    pauseTyping();
    return;
  }

  letterCount++;
  currentText = lines[lineCount];
  
  const startOpenGradient = currentText.indexOf("<span class='gradient'>");
  const endOpenGradient = startOpenGradient + "<span class='gradient'>".length;
  const startCloseGradient = currentText.indexOf("</span>");
  const endCloseGradient = startCloseGradient + "</span>".length;
  
  
  if (letterCount === startOpenGradient)
    letterCount = endOpenGradient;
  else if (letterCount === startCloseGradient)
    letterCount = endCloseGradient;
  
  currentText = lines[lineCount].slice(0, letterCount);

    textElement1.innerHTML = currentText;

  isCursorBlinking = true;
  textElement3.classList.toggle("blink");

  
  
  setTimeout(type, 100);
}

function pauseTyping() {
  setTimeout(() => {
    letterCount = 0;
    lineCount++;

    if (lineCount === lines.length) {
      return;
    }

    type();
  }, 1000);
}

type();

.text-animation {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-top: 50px;
}

h1 {
  display: inline-block;
}

.blink {
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.gradient {
  background: linear-gradient(to right, #FFC107, #FF5733);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="text-animation">
  <h1 class="line1"></h1>
  <h1 class="line2"></h1>
  <h1 class="line3"></h1>
</div>