五分钟实现一个chatGPT打字效果

由于chatGPT最近大火，甲方爸爸觉得这样的打字效果很酷，必须要在项目中安排一下，所以动手实现了这个效果

打字状态分析

1. loading - 在等待打字内容的时候光标会一直显示且闪烁
2. tyeing - 在打字中光标会显示但不闪烁
3. end - 在打字结束后光标隐藏

样式

// 光标字符显示
.typing::after {
  content: '▌';
}
// 光标闪烁动画
.blinker::after {
  animation: blinker 1s step-end infinite;
}
@keyframes blinker {
  0% {
    visibility: visible;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

内容打印功能实现

结合定时器和光标样式设置

**
 * @description:
 * @param {HTMLElement} dom - 打印内容的dom
 * @param {string} content - 打印文本内容
 * @param {number} speed - 打印速度
 * @return {void}
 */
function printText(dom, content, speed = 50) {
  let index = 0
  setCursorStatus(dom, 'typing')
  let printInterval = setInterval(() => {
    dom.innerText += content[index]
    index++
    if (index >= content.length) {
      setCursorStatus(dom, 'end')
      clearInterval(printInterval)
    }
  }, speed)
}

/**
 * @description: 设置dom的光标状态
 * @param {HTMLElement} dom - 打印内容的dom
 * @param {"loading"|"typing"|"end"} status - 打印状态
 * @return {void}
 */
function setCursorStatus(dom, status) {
  const classList = {
    loading: 'typing blinker',
    typing: 'typing',
    end: '',
  }
  dom.className = classList[status]
}

效果预览