如何在 Svelte 中使用 TypeitJs？

Question

 <script>
  import TypeIt from "typeit";
  export let name;

  new TypeIt('#simpleUsage', {
  strings: 'This is a simple string.',
  speed: 50,
  waitUntilVisible: true
}).go();

</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>
  Hello
  <span id="name"></span>
</h1>
<p id="simpleUsage"></p>

我成功导入了 typeit npm 模块，没有错误记录到控制台，但它仍然不起作用。

我尝试了 webpack 和 rollup 只是为了确定。

我知道我说的很具体，但有人可以帮我解决这个问题。我是 svelte 的新手，没有任何错误登录到控制台，很难找到问题所在。

Answer 1

<script> 中的代码在您的标记呈现之前运行（否则，如果您的标记中有任何逻辑，Svelte 将不知道 要呈现什么）。因此，之后才能引用 DOM 个节点。 onMount 函数存在的原因是：https://svelte.dev/tutorial/onmount

最好使用对 DOM 节点的引用而不是 id 属性（不能保证是唯一的——如果你有这个组件的两个实例，你会有重复的 ID）。参见 https://svelte.dev/tutorial/bind-this。

如何在 Svelte 中使用 TypeitJs？

How to use TypeitJs with Svelte?

svelte