打字机效果实现

electron中使用typeit组件，实现打字机效果，用于展示服务端发来的流式文本内容。

typeit demo地址

一起使用.go() + .flush()

• 根据您的需求，同时使用.go()和.flush()可能是有意义的。例如，您可能想从要运行的初始动画开始，然后跟进一些未知的一次性内容，但仍然希望保留将其全部重置为初始动画的能力。

关键代码

const instance = new TypeIt("#element", {
  afterComplete: () => console.log("Initial animation is done!"),
})
  .type("initial!")
  .go();

// Later... type some other stuff.

instance.type("some one-off stuff!").flush();

// Later... reset & re-run from the beginning.

instance.reset().go();

demo中代码

onst element = document.getElementById('type');
const input = document.querySelector('input');
const typeButton = document.getElementById('typeButton');
const resetButton = document.getElementById('resetButton');

const instance = new TypeIt(element, { speed: 50 })
  .type("Initial strng!", { delay: 500 })
  .move(-3, { delay: 250 })
  .type("i", { delay: 300 })
  .move(null, { to: 'end'})
  .go();

typeButton.addEventListener('click', () => {
  const string = input.value;
  input.value = "";
  
  instance
    .type(" Text added: ")
    .pause(500)
    .type(string)
    .flush();
});

resetButton.addEventListener('click', () => {
   instance.reset().go();
});