TypeIt.js:完成每个字符串后清空容器

Question

你好，我刚开始使用TypeIt.js，但在字符串之间的转换时遇到了问题。

我基本上想：

• 键入第一个字符串

• 暂停几秒钟

• 空，没有默认的向后删除

• 键入下一个字符串

我更新了之前的帖子，因为我意识到版本有问题。下面的代码几乎可以工作，但只有在第二个字符串完成之后。

如何在EACH字符串之后运行空函数？我试着不在第一个字符串之后进行反向删除。

https://codepen.io/NewbCake/pen/pxqVWO

谢谢你的帮助。

JS-

new TypeIt('#element', {
strings: ['First string', 'Second string'],
breakLines: false,
speed: 100,
cursor: false,
loop: true,
afterString: function(step, queue, instance) {
instance.pause(1000).empty();
},
})

Answer 1

您可以使用可链接的实例方法来执行此操作，但它们必须在初始化之前附加到主TypeIt实例。它看起来像这样：

new TypeIt('#element', {
breakLines: false,
speed: 100,
cursor: false,
loop: true
})
.type("First string.")
.pause(1000)
.empty()
.type("Second string.")
.pause(1000)
.empty()
.go();

工作示例：https://codepen.io/alexmacarthur/pen/MWwwJVO

您也可以使用afterString回调来实现这一点，它现在在v6.5.0中是异步的，但代码有点奇怪。

new TypeIt('#element', {
strings: ["First string.", "Second string."],
breakLines: false,
speed: 100,
cursor: false,
loop: true, 
afterString: async (step, queue, instance) => {
await new Promise((resolve) => {
setTimeout(() => {
instance.instances[0].$e.innerHTML = "";
return resolve();
}, 1000);
});
}
}).go();

希望这能帮助到一些人！